@@ -85,16 +91,22 @@ function LogSelectedField({
fieldKey={fieldKey}
fieldValue={fieldValue}
onAddToQuery={onAddToQuery}
+ fontSize={fontSize}
>
-
+
{fieldKey}
-
- {': '}
- {fieldValue || "''"}
+
+ {': '}
+
+ {fieldValue || "''"}
+
);
@@ -107,6 +119,7 @@ type ListLogViewProps = {
onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
activeLog?: ILog | null;
linesPerRow: number;
+ fontSize: FontSize;
};
function ListLogView({
@@ -116,6 +129,7 @@ function ListLogView({
onAddToQuery,
activeLog,
linesPerRow,
+ fontSize,
}: ListLogViewProps): JSX.Element {
const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
@@ -128,6 +142,7 @@ function ListLogView({
onAddToQuery: handleAddToQuery,
onSetActiveLog: handleSetActiveContextLog,
onClearActiveLog: handleClearActiveContextLog,
+ onGroupByAttribute,
} = useActiveLog();
const isDarkMode = useIsDarkMode();
@@ -185,6 +200,7 @@ function ListLogView({
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleDetailedView}
+ fontSize={fontSize}
>
-
+
{flattenLogData.stream && (
-
+
)}
-
+
{updatedSelecedFields.map((field) =>
isValidLogField(flattenLogData[field.name] as never) ? (
@@ -212,6 +238,7 @@ function ListLogView({
fieldKey={field.name}
fieldValue={flattenLogData[field.name] as never}
onAddToQuery={onAddToQuery}
+ fontSize={fontSize}
/>
) : null,
)}
@@ -232,6 +259,7 @@ function ListLogView({
onAddToQuery={handleAddToQuery}
selectedTab={VIEW_TYPES.CONTEXT}
onClose={handlerClearActiveContextLog}
+ onGroupByAttribute={onGroupByAttribute}
/>
)}
diff --git a/frontend/src/components/Logs/ListLogView/styles.ts b/frontend/src/components/Logs/ListLogView/styles.ts
index 52cc2b20d4..d2a6342c77 100644
--- a/frontend/src/components/Logs/ListLogView/styles.ts
+++ b/frontend/src/components/Logs/ListLogView/styles.ts
@@ -1,21 +1,46 @@
+/* eslint-disable no-nested-ternary */
import { Color } from '@signozhq/design-tokens';
import { Card, Typography } from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
interface LogTextProps {
linesPerRow?: number;
}
+interface LogContainerProps {
+ fontSize: FontSize;
+}
+
export const Container = styled(Card)<{
$isActiveLog: boolean;
$isDarkMode: boolean;
+ fontSize: FontSize;
}>`
width: 100% !important;
margin-bottom: 0.3rem;
+
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `margin-bottom:0.1rem;`
+ : fontSize === FontSize.MEDIUM
+ ? `margin-bottom: 0.2rem;`
+ : fontSize === FontSize.LARGE
+ ? `margin-bottom:0.3rem;`
+ : ``}
cursor: pointer;
.ant-card-body {
padding: 0.3rem 0.6rem;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `padding:0.1rem 0.6rem;`
+ : fontSize === FontSize.MEDIUM
+ ? `padding: 0.2rem 0.6rem;`
+ : fontSize === FontSize.LARGE
+ ? `padding:0.3rem 0.6rem;`
+ : ``}
+
${({ $isActiveLog, $isDarkMode }): string =>
$isActiveLog
? `background-color: ${
@@ -38,11 +63,17 @@ export const TextContainer = styled.div`
width: 100%;
`;
-export const LogContainer = styled.div`
+export const LogContainer = styled.div`
margin-left: 0.5rem;
display: flex;
flex-direction: column;
gap: 6px;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `gap: 2px;`
+ : fontSize === FontSize.MEDIUM
+ ? ` gap:4px;`
+ : `gap:6px;`}
`;
export const LogText = styled.div`
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
index a00c7f6761..61870abc71 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -9,11 +9,24 @@
border-radius: 50px;
background-color: transparent;
+ &.small {
+ min-height: 16px;
+ }
+
+ &.medium {
+ min-height: 20px;
+ }
+
+ &.large {
+ min-height: 24px;
+ }
+
&.INFO {
background-color: var(--bg-slate-400);
}
- &.WARNING, &.WARN {
+ &.WARNING,
+ &.WARN {
background-color: var(--bg-amber-500);
}
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
index d924c27426..06cc9d3ec4 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
@@ -1,10 +1,13 @@
import { render } from '@testing-library/react';
+import { FontSize } from 'container/OptionsMenu/types';
import LogStateIndicator from './LogStateIndicator';
describe('LogStateIndicator', () => {
it('renders correctly with default props', () => {
- const { container } = render();
+ const { container } = render(
+ ,
+ );
const indicator = container.firstChild as HTMLElement;
expect(indicator.classList.contains('log-state-indicator')).toBe(true);
expect(indicator.classList.contains('isActive')).toBe(false);
@@ -15,28 +18,30 @@ describe('LogStateIndicator', () => {
});
it('renders correctly when isActive is true', () => {
- const { container } = render();
+ const { container } = render(
+ ,
+ );
const indicator = container.firstChild as HTMLElement;
expect(indicator.classList.contains('isActive')).toBe(true);
});
it('renders correctly with different types', () => {
const { container: containerInfo } = render(
- ,
+ ,
);
expect(containerInfo.querySelector('.line')?.classList.contains('INFO')).toBe(
true,
);
const { container: containerWarning } = render(
- ,
+ ,
);
expect(
containerWarning.querySelector('.line')?.classList.contains('WARNING'),
).toBe(true);
const { container: containerError } = render(
- ,
+ ,
);
expect(
containerError.querySelector('.line')?.classList.contains('ERROR'),
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
index 5355e38017..b9afa5b7a2 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
@@ -1,6 +1,7 @@
import './LogStateIndicator.styles.scss';
import cx from 'classnames';
+import { FontSize } from 'container/OptionsMenu/types';
export const SEVERITY_TEXT_TYPE = {
TRACE: 'TRACE',
@@ -28,24 +29,31 @@ export const SEVERITY_TEXT_TYPE = {
FATAL2: 'FATAL2',
FATAL3: 'FATAL3',
FATAL4: 'FATAL4',
+ UNKNOWN: 'UNKNOWN',
} as const;
export const LogType = {
+ TRACE: 'TRACE',
+ DEBUG: 'DEBUG',
INFO: 'INFO',
- WARNING: 'WARNING',
+ WARN: 'WARN',
ERROR: 'ERROR',
+ FATAL: 'FATAL',
+ UNKNOWN: 'UNKNOWN',
} as const;
function LogStateIndicator({
type,
isActive,
+ fontSize,
}: {
type: string;
+ fontSize: FontSize;
isActive?: boolean;
}): JSX.Element {
return (
);
}
diff --git a/frontend/src/components/Logs/LogStateIndicator/utils.test.ts b/frontend/src/components/Logs/LogStateIndicator/utils.test.ts
index 65f6b9664d..17c601ffb4 100644
--- a/frontend/src/components/Logs/LogStateIndicator/utils.test.ts
+++ b/frontend/src/components/Logs/LogStateIndicator/utils.test.ts
@@ -1,9 +1,10 @@
+/* eslint-disable sonarjs/no-duplicate-string */
import { ILog } from 'types/api/logs/log';
import { getLogIndicatorType, getLogIndicatorTypeForTable } from './utils';
describe('getLogIndicatorType', () => {
- it('should return severity type for valid log with severityText', () => {
+ it('severity_number should be given priority over severity_text', () => {
const log = {
date: '2024-02-29T12:34:46Z',
timestamp: 1646115296,
@@ -20,11 +21,57 @@ describe('getLogIndicatorType', () => {
attributesInt: {},
attributesFloat: {},
severity_text: 'INFO',
+ severity_number: 2,
};
- expect(getLogIndicatorType(log)).toBe('INFO');
+ // severity_number should get priority over severity_text
+ expect(getLogIndicatorType(log)).toBe('TRACE');
});
- it('should return log level if severityText is missing', () => {
+ it('severity_text should be used when severity_number is absent ', () => {
+ const log = {
+ date: '2024-02-29T12:34:46Z',
+ timestamp: 1646115296,
+ id: '123456',
+ traceId: '987654',
+ spanId: '54321',
+ traceFlags: 0,
+ severityText: 'INFO',
+ severityNumber: 2,
+ body: 'Sample log Message',
+ resources_string: {},
+ attributesString: {},
+ attributes_string: {},
+ attributesInt: {},
+ attributesFloat: {},
+ severity_text: 'FATAL',
+ severity_number: 0,
+ };
+ expect(getLogIndicatorType(log)).toBe('FATAL');
+ });
+
+ it('case insensitive severity_text should be valid', () => {
+ const log = {
+ date: '2024-02-29T12:34:46Z',
+ timestamp: 1646115296,
+ id: '123456',
+ traceId: '987654',
+ spanId: '54321',
+ traceFlags: 0,
+ severityText: 'INFO',
+ severityNumber: 2,
+ body: 'Sample log Message',
+ resources_string: {},
+ attributesString: {},
+ attributes_string: {},
+ attributesInt: {},
+ attributesFloat: {},
+ severity_text: 'fatAl',
+ severity_number: 0,
+ };
+ expect(getLogIndicatorType(log)).toBe('FATAL');
+ });
+
+ it('should return log level if severityText and severityNumber is missing', () => {
const log: ILog = {
date: '2024-02-29T12:34:58Z',
timestamp: 1646115296,
@@ -36,13 +83,16 @@ describe('getLogIndicatorType', () => {
body: 'Sample log',
resources_string: {},
attributesString: {},
- attributes_string: {},
+ attributes_string: {
+ log_level: 'INFO' as never,
+ },
attributesInt: {},
attributesFloat: {},
- severity_text: 'FATAL',
+ severity_text: 'some_random',
severityText: '',
+ severity_number: 0,
};
- expect(getLogIndicatorType(log)).toBe('FATAL');
+ expect(getLogIndicatorType(log)).toBe('INFO');
});
});
@@ -55,6 +105,7 @@ describe('getLogIndicatorTypeForTable', () => {
traceId: '987654',
spanId: '54321',
traceFlags: 0,
+ severityNumber: 2,
severity_number: 2,
body: 'Sample log message',
resources_string: {},
@@ -64,7 +115,7 @@ describe('getLogIndicatorTypeForTable', () => {
attributesFloat: {},
severity_text: 'WARN',
};
- expect(getLogIndicatorTypeForTable(log)).toBe('WARN');
+ expect(getLogIndicatorTypeForTable(log)).toBe('TRACE');
});
it('should return log level if severityText is missing', () => {
@@ -75,7 +126,8 @@ describe('getLogIndicatorTypeForTable', () => {
traceId: '987654',
spanId: '54321',
traceFlags: 0,
- severityNumber: 2,
+ severityNumber: 0,
+ severity_number: 0,
body: 'Sample log message',
resources_string: {},
attributesString: {},
@@ -87,3 +139,47 @@ describe('getLogIndicatorTypeForTable', () => {
expect(getLogIndicatorTypeForTable(log)).toBe('INFO');
});
});
+
+describe('logIndicatorBySeverityNumber', () => {
+ // https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
+ const logLevelExpectations = [
+ { minSevNumber: 1, maxSevNumber: 4, expectedIndicatorType: 'TRACE' },
+ { minSevNumber: 5, maxSevNumber: 8, expectedIndicatorType: 'DEBUG' },
+ { minSevNumber: 9, maxSevNumber: 12, expectedIndicatorType: 'INFO' },
+ { minSevNumber: 13, maxSevNumber: 16, expectedIndicatorType: 'WARN' },
+ { minSevNumber: 17, maxSevNumber: 20, expectedIndicatorType: 'ERROR' },
+ { minSevNumber: 21, maxSevNumber: 24, expectedIndicatorType: 'FATAL' },
+ ];
+ logLevelExpectations.forEach((e) => {
+ for (let sevNum = e.minSevNumber; sevNum <= e.maxSevNumber; sevNum++) {
+ const sevText = (Math.random() + 1).toString(36).substring(2);
+
+ const log = {
+ date: '2024-02-29T12:34:46Z',
+ timestamp: 1646115296,
+ id: '123456',
+ traceId: '987654',
+ spanId: '54321',
+ traceFlags: 0,
+ severityText: sevText,
+ severityNumber: sevNum,
+ body: 'Sample log Message',
+ resources_string: {},
+ attributesString: {},
+ attributes_string: {},
+ attributesInt: {},
+ attributesFloat: {},
+ severity_text: sevText,
+ severity_number: sevNum,
+ };
+
+ it(`getLogIndicatorType should return ${e.expectedIndicatorType} for severity_text: ${sevText} and severity_number: ${sevNum}`, () => {
+ expect(getLogIndicatorType(log)).toBe(e.expectedIndicatorType);
+ });
+
+ it(`getLogIndicatorTypeForTable should return ${e.expectedIndicatorType} for severity_text: ${sevText} and severity_number: ${sevNum}`, () => {
+ expect(getLogIndicatorTypeForTable(log)).toBe(e.expectedIndicatorType);
+ });
+ }
+ });
+});
diff --git a/frontend/src/components/Logs/LogStateIndicator/utils.ts b/frontend/src/components/Logs/LogStateIndicator/utils.ts
index 7bfe7a430a..03989a8dd6 100644
--- a/frontend/src/components/Logs/LogStateIndicator/utils.ts
+++ b/frontend/src/components/Logs/LogStateIndicator/utils.ts
@@ -2,56 +2,112 @@ import { ILog } from 'types/api/logs/log';
import { LogType, SEVERITY_TEXT_TYPE } from './LogStateIndicator';
-const getSeverityType = (severityText: string): string => {
+const getLogTypeBySeverityText = (severityText: string): string => {
switch (severityText) {
case SEVERITY_TEXT_TYPE.TRACE:
case SEVERITY_TEXT_TYPE.TRACE2:
case SEVERITY_TEXT_TYPE.TRACE3:
case SEVERITY_TEXT_TYPE.TRACE4:
- return SEVERITY_TEXT_TYPE.TRACE;
+ return LogType.TRACE;
case SEVERITY_TEXT_TYPE.DEBUG:
case SEVERITY_TEXT_TYPE.DEBUG2:
case SEVERITY_TEXT_TYPE.DEBUG3:
case SEVERITY_TEXT_TYPE.DEBUG4:
- return SEVERITY_TEXT_TYPE.DEBUG;
+ return LogType.DEBUG;
case SEVERITY_TEXT_TYPE.INFO:
case SEVERITY_TEXT_TYPE.INFO2:
case SEVERITY_TEXT_TYPE.INFO3:
case SEVERITY_TEXT_TYPE.INFO4:
- return SEVERITY_TEXT_TYPE.INFO;
+ return LogType.INFO;
case SEVERITY_TEXT_TYPE.WARN:
case SEVERITY_TEXT_TYPE.WARN2:
case SEVERITY_TEXT_TYPE.WARN3:
case SEVERITY_TEXT_TYPE.WARN4:
case SEVERITY_TEXT_TYPE.WARNING:
- return SEVERITY_TEXT_TYPE.WARN;
+ return LogType.WARN;
case SEVERITY_TEXT_TYPE.ERROR:
case SEVERITY_TEXT_TYPE.ERROR2:
case SEVERITY_TEXT_TYPE.ERROR3:
case SEVERITY_TEXT_TYPE.ERROR4:
- return SEVERITY_TEXT_TYPE.ERROR;
+ return LogType.ERROR;
case SEVERITY_TEXT_TYPE.FATAL:
case SEVERITY_TEXT_TYPE.FATAL2:
case SEVERITY_TEXT_TYPE.FATAL3:
case SEVERITY_TEXT_TYPE.FATAL4:
- return SEVERITY_TEXT_TYPE.FATAL;
+ return LogType.FATAL;
default:
- return SEVERITY_TEXT_TYPE.INFO;
+ return LogType.UNKNOWN;
}
};
-export const getLogIndicatorType = (logData: ILog): string => {
- if (logData.severity_text) {
- return getSeverityType(logData.severity_text);
+// https://opentelemetry.io/docs/specs/otel/logs/data-model/#field-severitynumber
+const getLogTypeBySeverityNumber = (severityNumber: number): string => {
+ if (severityNumber < 1) {
+ return LogType.UNKNOWN;
+ }
+ if (severityNumber < 5) {
+ return LogType.TRACE;
+ }
+ if (severityNumber < 9) {
+ return LogType.DEBUG;
+ }
+ if (severityNumber < 13) {
+ return LogType.INFO;
+ }
+ if (severityNumber < 17) {
+ return LogType.WARN;
+ }
+ if (severityNumber < 21) {
+ return LogType.ERROR;
+ }
+ if (severityNumber < 25) {
+ return LogType.FATAL;
+ }
+ return LogType.UNKNOWN;
+};
+
+const getLogType = (
+ severityText: string,
+ severityNumber: number,
+ defaultType: string,
+): string => {
+ // give priority to the severityNumber
+ if (severityNumber) {
+ const logType = getLogTypeBySeverityNumber(severityNumber);
+ if (logType !== LogType.UNKNOWN) {
+ return logType;
+ }
}
- return logData.attributes_string?.log_level || LogType.INFO;
+
+ // is severityNumber is not present then rely on the severityText
+ if (severityText) {
+ const logType = getLogTypeBySeverityText(severityText);
+ if (logType !== LogType.UNKNOWN) {
+ return logType;
+ }
+ }
+
+ return defaultType;
+};
+
+export const getLogIndicatorType = (logData: ILog): string => {
+ const defaultType = logData.attributes_string?.log_level || LogType.INFO;
+ // convert the severity_text to upper case for the comparison to support case insensitive values
+ return getLogType(
+ logData?.severity_text?.toUpperCase(),
+ logData?.severity_number || 0,
+ defaultType,
+ );
};
export const getLogIndicatorTypeForTable = (
log: Record,
): string => {
- if (log.severity_text) {
- return getSeverityType(log.severity_text as string);
- }
- return (log.log_level as string) || LogType.INFO;
+ const defaultType = (log.log_level as string) || LogType.INFO;
+ // convert the severity_text to upper case for the comparison to support case insensitive values
+ return getLogType(
+ (log?.severity_text as string)?.toUpperCase(),
+ (log?.severity_number as number) || 0,
+ defaultType,
+ );
};
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index fcb8beeeec..2cda9c7247 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -4,6 +4,7 @@ import Convert from 'ansi-to-html';
import { DrawerProps } from 'antd';
import LogDetail from 'components/LogDetail';
import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+import { unescapeString } from 'container/LogDetailedView/utils';
import LogsExplorerContext from 'container/LogsExplorerContext';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
@@ -39,6 +40,7 @@ function RawLogView({
linesPerRow,
isTextOverflowEllipsisDisabled,
selectedFields = [],
+ fontSize,
}: RawLogViewProps): JSX.Element {
const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
data.id,
@@ -54,6 +56,7 @@ function RawLogView({
onSetActiveLog,
onClearActiveLog,
onAddToQuery,
+ onGroupByAttribute,
} = useActiveLog();
const [hasActionButtons, setHasActionButtons] = useState(false);
@@ -62,8 +65,6 @@ function RawLogView({
const isDarkMode = useIsDarkMode();
const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
- const severityText = data.severity_text ? `${data.severity_text} |` : '';
-
const logType = getLogIndicatorType(data);
const updatedSelecedFields = useMemo(
@@ -88,17 +89,16 @@ function RawLogView({
attributesText += ' | ';
}
- const text = useMemo(
- () =>
+ const text = useMemo(() => {
+ const date =
typeof data.timestamp === 'string'
- ? `${dayjs(data.timestamp).format(
- 'YYYY-MM-DD HH:mm:ss.SSS',
- )} | ${attributesText} ${severityText} ${data.body}`
- : `${dayjs(data.timestamp / 1e6).format(
- 'YYYY-MM-DD HH:mm:ss.SSS',
- )} | ${attributesText} ${severityText} ${data.body}`,
- [data.timestamp, data.body, severityText, attributesText],
- );
+ ? dayjs(data.timestamp)
+ : dayjs(data.timestamp / 1e6);
+
+ return `${date.format('YYYY-MM-DD HH:mm:ss.SSS')} | ${attributesText} ${
+ data.body
+ }`;
+ }, [data.timestamp, data.body, attributesText]);
const handleClickExpand = useCallback(() => {
if (activeContextLog || isReadOnly) return;
@@ -146,7 +146,9 @@ function RawLogView({
const html = useMemo(
() => ({
__html: convert.toHtml(
- dompurify.sanitize(text, { FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS] }),
+ dompurify.sanitize(unescapeString(text), {
+ FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
+ }),
),
}),
[text],
@@ -163,6 +165,7 @@ function RawLogView({
$isActiveLog={isActiveLog}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
+ fontSize={fontSize}
>
@@ -202,6 +207,7 @@ function RawLogView({
onClose={handleCloseLogDetail}
onAddToQuery={onAddToQuery}
onClickActionItem={onAddToQuery}
+ onGroupByAttribute={onGroupByAttribute}
/>
)}
diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts
index 357eed0324..d464f35910 100644
--- a/frontend/src/components/Logs/RawLogView/styles.ts
+++ b/frontend/src/components/Logs/RawLogView/styles.ts
@@ -1,6 +1,8 @@
+/* eslint-disable no-nested-ternary */
import { blue } from '@ant-design/colors';
import { Color } from '@signozhq/design-tokens';
import { Col, Row, Space } from 'antd';
+import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
import { getActiveLogBackground, getDefaultLogBackground } from 'utils/logs';
@@ -11,6 +13,7 @@ export const RawLogViewContainer = styled(Row)<{
$isReadOnly?: boolean;
$isActiveLog?: boolean;
$isHightlightedLog: boolean;
+ fontSize: FontSize;
}>`
position: relative;
width: 100%;
@@ -22,6 +25,13 @@ export const RawLogViewContainer = styled(Row)<{
.log-state-indicator {
margin: 4px 0;
+
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `margin: 1px 0;`
+ : fontSize === FontSize.MEDIUM
+ ? `margin: 1px 0;`
+ : `margin: 2px 0;`}
}
${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
@@ -49,9 +59,9 @@ export const ExpandIconWrapper = styled(Col)`
export const RawLogContent = styled.div`
margin-bottom: 0;
font-family: 'SF Mono', monospace;
- font-family: 'Space Mono', monospace;
- font-size: 13px;
- font-weight: 400;
+ font-family: 'Geist Mono';
+ letter-spacing: -0.07px;
+ padding: 4px;
text-align: left;
color: ${({ $isDarkMode }): string =>
$isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400};
@@ -66,9 +76,15 @@ export const RawLogContent = styled.div`
line-clamp: ${linesPerRow};
-webkit-box-orient: vertical;`};
+ font-size: 13px;
+ font-weight: 400;
line-height: 24px;
- letter-spacing: -0.07px;
- padding: 4px;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `font-size:11px; line-height:16px; padding:1px;`
+ : fontSize === FontSize.MEDIUM
+ ? `font-size:13px; line-height:20px; padding:1px;`
+ : `font-size:14px; line-height:24px; padding:2px;`}
cursor: ${({ $isActiveLog, $isReadOnly }): string =>
$isActiveLog || $isReadOnly ? 'initial' : 'pointer'};
diff --git a/frontend/src/components/Logs/RawLogView/types.ts b/frontend/src/components/Logs/RawLogView/types.ts
index a9c85c2ad6..ed73725dcc 100644
--- a/frontend/src/components/Logs/RawLogView/types.ts
+++ b/frontend/src/components/Logs/RawLogView/types.ts
@@ -1,3 +1,4 @@
+import { FontSize } from 'container/OptionsMenu/types';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
@@ -7,11 +8,13 @@ export interface RawLogViewProps {
isTextOverflowEllipsisDisabled?: boolean;
data: ILog;
linesPerRow: number;
+ fontSize: FontSize;
selectedFields?: IField[];
}
export interface RawLogContentProps {
linesPerRow: number;
+ fontSize: FontSize;
$isReadOnly?: boolean;
$isActiveLog?: boolean;
$isDarkMode?: boolean;
diff --git a/frontend/src/components/Logs/TableView/styles.ts b/frontend/src/components/Logs/TableView/styles.ts
index 9213021971..a79db04a76 100644
--- a/frontend/src/components/Logs/TableView/styles.ts
+++ b/frontend/src/components/Logs/TableView/styles.ts
@@ -1,7 +1,10 @@
+/* eslint-disable no-nested-ternary */
+import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
interface TableBodyContentProps {
linesPerRow: number;
+ fontSize: FontSize;
isDarkMode?: boolean;
}
@@ -20,4 +23,10 @@ export const TableBodyContent = styled.div`
-webkit-line-clamp: ${(props): number => props.linesPerRow};
line-clamp: ${(props): number => props.linesPerRow};
-webkit-box-orient: vertical;
+ ${({ fontSize }): string =>
+ fontSize === FontSize.SMALL
+ ? `font-size:11px; line-height:16px;`
+ : fontSize === FontSize.MEDIUM
+ ? `font-size:13px; line-height:20px;`
+ : `font-size:14px; line-height:24px;`}
`;
diff --git a/frontend/src/components/Logs/TableView/types.ts b/frontend/src/components/Logs/TableView/types.ts
index 36a796ac0f..b2d3670dd8 100644
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@@ -1,4 +1,5 @@
import { ColumnsType, ColumnType } from 'antd/es/table';
+import { FontSize } from 'container/OptionsMenu/types';
import { IField } from 'types/api/logs/fields';
import { ILog } from 'types/api/logs/log';
@@ -10,6 +11,7 @@ export type LogsTableViewProps = {
logs: ILog[];
fields: IField[];
linesPerRow: number;
+ fontSize: FontSize;
onClickExpand?: (log: ILog) => void;
};
diff --git a/frontend/src/components/Logs/TableView/useTableView.styles.scss b/frontend/src/components/Logs/TableView/useTableView.styles.scss
index 3723ecc705..9592d0ae12 100644
--- a/frontend/src/components/Logs/TableView/useTableView.styles.scss
+++ b/frontend/src/components/Logs/TableView/useTableView.styles.scss
@@ -5,6 +5,21 @@
font-weight: 400;
line-height: 18px; /* 128.571% */
letter-spacing: -0.07px;
+
+ &.small {
+ font-size: 11px;
+ line-height: 16px;
+ }
+
+ &.medium {
+ font-size: 13px;
+ line-height: 20px;
+ }
+
+ &.large {
+ font-size: 14px;
+ line-height: 24px;
+ }
}
.table-timestamp {
@@ -25,3 +40,21 @@
color: var(--bg-slate-400);
}
}
+
+.paragraph {
+ padding: 0px !important;
+ &.small {
+ font-size: 11px !important;
+ line-height: 16px !important;
+ }
+
+ &.medium {
+ font-size: 13px !important;
+ line-height: 20px !important;
+ }
+
+ &.large {
+ font-size: 14px !important;
+ line-height: 24px !important;
+ }
+}
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
index fd37132110..43b4ba2628 100644
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -3,6 +3,8 @@ import './useTableView.styles.scss';
import Convert from 'ansi-to-html';
import { Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
+import cx from 'classnames';
+import { unescapeString } from 'container/LogDetailedView/utils';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -31,6 +33,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
logs,
fields,
linesPerRow,
+ fontSize,
appendTo = 'center',
activeContextLog,
activeLog,
@@ -57,7 +60,10 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
: getDefaultCellStyle(isDarkMode),
},
children: (
-
+
{field}
),
@@ -87,8 +93,9 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
isActive={
activeLog?.id === item.id || activeContextLog?.id === item.id
}
+ fontSize={fontSize}
/>
-
+
{date}
@@ -109,11 +116,12 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
@@ -130,6 +138,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
linesPerRow,
activeLog?.id,
activeContextLog?.id,
+ fontSize,
]);
return { columns, dataSource: flattenLogData };
diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
index af325a2d25..070d440781 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
@@ -17,17 +17,126 @@
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(20px);
+ .font-size-dropdown {
+ display: flex;
+ flex-direction: column;
+
+ .back-btn {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 12px;
+ border: none !important;
+ box-shadow: none !important;
+
+ .icon {
+ flex-shrink: 0;
+ }
+ .text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: 0.14px;
+ }
+ }
+
+ .back-btn:hover {
+ background-color: unset !important;
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ .option-btn {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ border: none !important;
+ box-shadow: none !important;
+ justify-content: space-between;
+
+ .icon {
+ flex-shrink: 0;
+ }
+ .text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal; /* 142.857% */
+ letter-spacing: 0.14px;
+ text-transform: capitalize;
+ }
+
+ .text:hover {
+ color: var(--bg-vanilla-300);
+ }
+ }
+
+ .option-btn:hover {
+ background-color: unset !important;
+ }
+ }
+ }
+
+ .font-size-container {
+ padding: 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .title {
+ color: var(--bg-slate-50);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.88px;
+ text-transform: uppercase;
+ }
+
+ .value {
+ display: flex;
+ height: 20px;
+ padding: 4px 0px;
+ justify-content: space-between;
+ align-items: center;
+ border: none !important;
+ .font-value {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ letter-spacing: 0.14px;
+ text-transform: capitalize;
+ }
+ .icon {
+ }
+ }
+
+ .value:hover {
+ background-color: unset !important;
+ }
+ }
+
.menu-container {
padding: 12px;
.title {
font-family: Inter;
font-size: 11px;
- font-weight: 600;
+ font-weight: 500;
line-height: 18px;
letter-spacing: 0.08em;
text-align: left;
- color: #52575c;
+ color: var(--bg-slate-50);
}
.menu-items {
@@ -65,11 +174,11 @@
padding: 12px;
.title {
- color: #52575c;
+ color: var(--bg-slate-50);
font-family: Inter;
font-size: 11px;
font-style: normal;
- font-weight: 600;
+ font-weight: 500;
line-height: 18px; /* 163.636% */
letter-spacing: 0.88px;
text-transform: uppercase;
@@ -149,11 +258,11 @@
}
.title {
- color: #52575c;
+ color: var(--bg-slate-50);
font-family: Inter;
font-size: 11px;
font-style: normal;
- font-weight: 600;
+ font-weight: 500;
line-height: 18px; /* 163.636% */
letter-spacing: 0.88px;
text-transform: uppercase;
@@ -299,6 +408,38 @@
box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+ .font-size-dropdown {
+ .back-btn {
+ .text {
+ color: var(--bg-ink-400);
+ }
+ }
+
+ .content {
+ .option-btn {
+ .text {
+ color: var(--bg-ink-400);
+ }
+
+ .text:hover {
+ color: var(--bg-ink-300);
+ }
+ }
+ }
+ }
+
+ .font-size-container {
+ .title {
+ color: var(--bg-ink-100);
+ }
+
+ .value {
+ .font-value {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+
.horizontal-line {
background: var(--bg-vanilla-300);
}
diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
index 3a42e9a0b0..527c77c6af 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -3,12 +3,12 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import './LogsFormatOptionsMenu.styles.scss';
-import { Divider, Input, InputNumber, Tooltip } from 'antd';
+import { Button, Divider, Input, InputNumber, Tooltip, Typography } from 'antd';
import cx from 'classnames';
import { LogViewMode } from 'container/LogsTable';
-import { OptionsMenuConfig } from 'container/OptionsMenu/types';
+import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, Minus, Plus, X } from 'lucide-react';
+import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
import { useCallback, useEffect, useState } from 'react';
interface LogsFormatOptionsMenuProps {
@@ -24,10 +24,16 @@ export default function LogsFormatOptionsMenu({
selectedOptionFormat,
config,
}: LogsFormatOptionsMenuProps): JSX.Element {
- const { maxLines, format, addColumn } = config;
+ const { maxLines, format, addColumn, fontSize } = config;
const [selectedItem, setSelectedItem] = useState(selectedOptionFormat);
const maxLinesNumber = (maxLines?.value as number) || 1;
const [maxLinesPerRow, setMaxLinesPerRow] = useState
(maxLinesNumber);
+ const [fontSizeValue, setFontSizeValue] = useState(
+ fontSize?.value || FontSize.SMALL,
+ );
+ const [isFontSizeOptionsOpen, setIsFontSizeOptionsOpen] = useState(
+ false,
+ );
const [addNewColumn, setAddNewColumn] = useState(false);
@@ -88,6 +94,12 @@ export default function LogsFormatOptionsMenu({
}
}, [maxLinesPerRow]);
+ useEffect(() => {
+ if (fontSizeValue && config && config.fontSize?.onChange) {
+ config.fontSize.onChange(fontSizeValue);
+ }
+ }, [fontSizeValue]);
+
return (
-
-
{title}
-
-
- {items.map(
- (item: any): JSX.Element => (
-
handleMenuItemClick(item.key)}
- >
-
- {item.label}
-
- {selectedItem === item.key && }
-
-
- ),
- )}
+ {isFontSizeOptionsOpen ? (
+
+
+
+
+
+
+
+
-
-
- {selectedItem && (
+ ) : (
<>
- <>
-
-
-
max lines per row
-
-
-
-
-
-
-
-
-
- {!addNewColumn &&
}
-
- {addNewColumn && (
-
-
- {' '}
- columns
- {' '}
-
+
+
Font Size
+
+
+
+
- )}
+
+ {items.map(
+ (item: any): JSX.Element => (
+
handleMenuItemClick(item.key)}
+ >
+
+ {item.label}
-
- {!addNewColumn && (
-
+ {selectedItem === item.key &&
}
+
+
+ ),
)}
+
+
-
- {addColumn?.value?.map(({ key, id }) => (
-
-
-
- {key}
-
-
-
addColumn.onRemove(id as string)}
+ {selectedItem && (
+ <>
+ <>
+
+
+
max lines per row
+
+
+
+
- ))}
-
+
- {addColumn?.isFetching && (
-
Loading ...
- )}
+
+ {!addNewColumn &&
}
+
+ {addNewColumn && (
+
+
+ {' '}
+ columns
+ {' '}
+
- {addNewColumn &&
- addColumn &&
- addColumn.value.length > 0 &&
- addColumn.options &&
- addColumn?.options?.length > 0 && (
-
+
+
)}
- {addNewColumn && (
-
- {addColumn?.options?.map(({ label, value }) => (
-
{
- eve.stopPropagation();
-
- if (addColumn && addColumn?.onSelect) {
- addColumn?.onSelect(value, { label, disabled: false });
- }
- }}
- >
-
-
- {label}
-
+
+ {!addNewColumn && (
+
+ )}
+
+
+ {addColumn?.value?.map(({ key, id }) => (
+
+
+
+ {key}
+
+
+
addColumn.onRemove(id as string)}
+ />
+ ))}
+
+
+ {addColumn?.isFetching && (
+
Loading ...
+ )}
+
+ {addNewColumn &&
+ addColumn &&
+ addColumn.value.length > 0 &&
+ addColumn.options &&
+ addColumn?.options?.length > 0 && (
+
+ )}
+
+ {addNewColumn && (
+
+ {addColumn?.options?.map(({ label, value }) => (
+
{
+ eve.stopPropagation();
+
+ if (addColumn && addColumn?.onSelect) {
+ addColumn?.onSelect(value, { label, disabled: false });
+ }
+ }}
+ >
+
+
+ {label}
+
+
+
+ ))}
- ))}
+ )}
- )}
-
-
+
+
+ )}
)}
diff --git a/frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx b/frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx
new file mode 100644
index 0000000000..73c95ce27d
--- /dev/null
+++ b/frontend/src/components/OverlayScrollbar/OverlayScrollbar.tsx
@@ -0,0 +1,54 @@
+import TypicalOverlayScrollbar from 'components/TypicalOverlayScrollbar/TypicalOverlayScrollbar';
+import VirtuosoOverlayScrollbar from 'components/VirtuosoOverlayScrollbar/VirtuosoOverlayScrollbar';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { PartialOptions } from 'overlayscrollbars';
+import { CSSProperties, ReactElement, useMemo } from 'react';
+
+type Props = {
+ children: ReactElement;
+ isVirtuoso?: boolean;
+ style?: CSSProperties;
+ options?: PartialOptions;
+};
+
+function OverlayScrollbar({
+ children,
+ isVirtuoso,
+ style,
+ options: customOptions,
+}: Props): any {
+ const isDarkMode = useIsDarkMode();
+ const options = useMemo(
+ () =>
+ ({
+ scrollbars: {
+ autoHide: 'scroll',
+ theme: isDarkMode ? 'os-theme-light' : 'os-theme-dark',
+ },
+ ...(customOptions || {}),
+ } as PartialOptions),
+ [customOptions, isDarkMode],
+ );
+
+ if (isVirtuoso) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+
+ {children}
+
+ );
+}
+
+OverlayScrollbar.defaultProps = {
+ isVirtuoso: false,
+ style: {},
+ options: {},
+};
+
+export default OverlayScrollbar;
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
new file mode 100644
index 0000000000..c46d9975f4
--- /dev/null
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -0,0 +1,145 @@
+.checkbox-filter {
+ display: flex;
+ flex-direction: column;
+ padding: 12px;
+ gap: 12px;
+ border-bottom: 1px solid var(--bg-slate-400);
+ .filter-header-checkbox {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .left-action {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .title {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: -0.07px;
+ text-transform: capitalize;
+ }
+ }
+
+ .right-action {
+ display: flex;
+ align-items: center;
+
+ .clear-all {
+ font-size: 12px;
+ color: var(--bg-robin-500);
+ cursor: pointer;
+ }
+ }
+ }
+
+ .values {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .value {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ .checkbox-value-section {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ cursor: pointer;
+
+ &.filter-disabled {
+ cursor: not-allowed;
+
+ .value-string {
+ color: var(--bg-slate-200);
+ }
+
+ .only-btn {
+ cursor: not-allowed;
+ color: var(--bg-slate-200);
+ }
+
+ .toggle-btn {
+ cursor: not-allowed;
+ color: var(--bg-slate-200);
+ }
+ }
+
+ .value-string {
+ }
+
+ .only-btn {
+ display: none;
+ }
+ .toggle-btn {
+ display: none;
+ }
+
+ .toggle-btn:hover {
+ background-color: unset;
+ }
+
+ .only-btn:hover {
+ background-color: unset;
+ }
+ }
+
+ .checkbox-value-section:hover {
+ .toggle-btn {
+ display: none;
+ }
+ .only-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 21px;
+ }
+ }
+ }
+
+ .value:hover {
+ .toggle-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 21px;
+ }
+ }
+ }
+
+ .no-data {
+ align-self: center;
+ }
+
+ .show-more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .show-more-text {
+ color: var(--bg-robin-500);
+ cursor: pointer;
+ }
+ }
+}
+
+.lightMode {
+ .checkbox-filter {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+ .filter-header-checkbox {
+ .left-action {
+ .title {
+ color: var(--bg-ink-400);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
new file mode 100644
index 0000000000..dcf3cc8f3e
--- /dev/null
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -0,0 +1,510 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable sonarjs/no-identical-functions */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import './Checkbox.styles.scss';
+
+import { Button, Checkbox, Input, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import { IQuickFiltersConfig } from 'components/QuickFilters/QuickFilters';
+import { OPERATORS } from 'constants/queryBuilder';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { cloneDeep, isArray, isEmpty, isEqual } from 'lodash-es';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { v4 as uuid } from 'uuid';
+
+const SELECTED_OPERATORS = [OPERATORS['='], 'in'];
+const NON_SELECTED_OPERATORS = [OPERATORS['!='], 'nin'];
+
+function setDefaultValues(
+ values: string[],
+ trueOrFalse: boolean,
+): Record
{
+ const defaultState: Record = {};
+ values.forEach((val) => {
+ defaultState[val] = trueOrFalse;
+ });
+ return defaultState;
+}
+interface ICheckboxProps {
+ filter: IQuickFiltersConfig;
+}
+
+export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
+ const { filter } = props;
+ const [searchText, setSearchText] = useState('');
+ const [isOpen, setIsOpen] = useState(filter.defaultOpen);
+ const [visibleItemsCount, setVisibleItemsCount] = useState(10);
+
+ const {
+ lastUsedQuery,
+ currentQuery,
+ redirectWithQueryBuilderData,
+ } = useQueryBuilder();
+
+ const { data, isLoading } = useGetAggregateValues(
+ {
+ aggregateOperator: 'noop',
+ dataSource: DataSource.LOGS,
+ aggregateAttribute: '',
+ attributeKey: filter.attributeKey.key,
+ filterAttributeKeyDataType: filter.attributeKey.dataType || DataTypes.EMPTY,
+ tagType: filter.attributeKey.type || '',
+ searchText: searchText ?? '',
+ },
+ {
+ enabled: isOpen,
+ keepPreviousData: true,
+ },
+ );
+
+ const attributeValues: string[] = useMemo(
+ () =>
+ ((Object.values(data?.payload || {}).find((el) => !!el) ||
+ []) as string[]).filter((val) => !isEmpty(val)),
+ [data?.payload],
+ );
+ const currentAttributeKeys = attributeValues.slice(0, visibleItemsCount);
+
+ // derive the state of each filter key here in the renderer itself and keep it in sync with staged query
+ // also we need to keep a note of last focussed query.
+ // eslint-disable-next-line sonarjs/cognitive-complexity
+ const currentFilterState = useMemo(() => {
+ let filterState: Record = setDefaultValues(
+ attributeValues,
+ false,
+ );
+ const filterSync = currentQuery?.builder.queryData?.[
+ lastUsedQuery || 0
+ ]?.filters?.items.find((item) =>
+ isEqual(item.key?.key, filter.attributeKey.key),
+ );
+
+ if (filterSync) {
+ if (SELECTED_OPERATORS.includes(filterSync.op)) {
+ if (isArray(filterSync.value)) {
+ filterSync.value.forEach((val) => {
+ filterState[val] = true;
+ });
+ } else if (typeof filterSync.value === 'string') {
+ filterState[filterSync.value] = true;
+ } else if (typeof filterSync.value === 'boolean') {
+ filterState[String(filterSync.value)] = true;
+ } else if (typeof filterSync.value === 'number') {
+ filterState[String(filterSync.value)] = true;
+ }
+ } else if (NON_SELECTED_OPERATORS.includes(filterSync.op)) {
+ filterState = setDefaultValues(attributeValues, true);
+ if (isArray(filterSync.value)) {
+ filterSync.value.forEach((val) => {
+ filterState[val] = false;
+ });
+ } else if (typeof filterSync.value === 'string') {
+ filterState[filterSync.value] = false;
+ } else if (typeof filterSync.value === 'boolean') {
+ filterState[String(filterSync.value)] = false;
+ } else if (typeof filterSync.value === 'number') {
+ filterState[String(filterSync.value)] = false;
+ }
+ }
+ } else {
+ filterState = setDefaultValues(attributeValues, true);
+ }
+ return filterState;
+ }, [
+ attributeValues,
+ currentQuery?.builder.queryData,
+ filter.attributeKey,
+ lastUsedQuery,
+ ]);
+
+ // disable the filter when there are multiple entries of the same attribute key present in the filter bar
+ const isFilterDisabled = useMemo(
+ () =>
+ (currentQuery?.builder?.queryData?.[
+ lastUsedQuery || 0
+ ]?.filters?.items?.filter((item) =>
+ isEqual(item.key?.key, filter.attributeKey.key),
+ )?.length || 0) > 1,
+
+ [currentQuery?.builder?.queryData, lastUsedQuery, filter.attributeKey],
+ );
+
+ // variable to check if the current filter has multiple values to its name in the key op value section
+ const isMultipleValuesTrueForTheKey =
+ Object.values(currentFilterState).filter((val) => val).length > 1;
+
+ const handleClearFilterAttribute = (): void => {
+ const preparedQuery: Query = {
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: currentQuery.builder.queryData.map((item, idx) => ({
+ ...item,
+ filters: {
+ ...item.filters,
+ items:
+ idx === lastUsedQuery
+ ? item.filters.items.filter(
+ (fil) => !isEqual(fil.key?.key, filter.attributeKey.key),
+ )
+ : [...item.filters.items],
+ },
+ })),
+ },
+ };
+ redirectWithQueryBuilderData(preparedQuery);
+ };
+
+ const isSomeFilterPresentForCurrentAttribute = currentQuery.builder.queryData?.[
+ lastUsedQuery || 0
+ ]?.filters?.items?.some((item) =>
+ isEqual(item.key?.key, filter.attributeKey.key),
+ );
+
+ const onChange = (
+ value: string,
+ checked: boolean,
+ isOnlyOrAllClicked: boolean,
+ // eslint-disable-next-line sonarjs/cognitive-complexity
+ ): void => {
+ const query = cloneDeep(currentQuery.builder.queryData?.[lastUsedQuery || 0]);
+
+ // if only or all are clicked we do not need to worry about anything just override whatever we have
+ // by either adding a new IN operator value clause in case of ONLY or remove everything we have for ALL.
+ if (isOnlyOrAllClicked && query?.filters?.items) {
+ const isOnlyOrAll = isSomeFilterPresentForCurrentAttribute
+ ? currentFilterState[value] && !isMultipleValuesTrueForTheKey
+ ? 'All'
+ : 'Only'
+ : 'Only';
+ query.filters.items = query.filters.items.filter(
+ (q) => !isEqual(q.key?.key, filter.attributeKey.key),
+ );
+ if (isOnlyOrAll === 'Only') {
+ const newFilterItem: TagFilterItem = {
+ id: uuid(),
+ op: getOperatorValue(OPERATORS.IN),
+ key: filter.attributeKey,
+ value,
+ };
+ query.filters.items = [...query.filters.items, newFilterItem];
+ }
+ } else if (query?.filters?.items) {
+ if (
+ query.filters?.items?.some((item) =>
+ isEqual(item.key?.key, filter.attributeKey.key),
+ )
+ ) {
+ // if there is already a running filter for the current attribute key then
+ // we split the cases by which particular operator is present right now!
+ const currentFilter = query.filters?.items?.find((q) =>
+ isEqual(q.key?.key, filter.attributeKey.key),
+ );
+ if (currentFilter) {
+ const runningOperator = currentFilter?.op;
+ switch (runningOperator) {
+ case 'in':
+ if (checked) {
+ // if it's an IN operator then if we are checking another value it get's added to the
+ // filter clause. example - key IN [value1, currentSelectedValue]
+ if (isArray(currentFilter.value)) {
+ const newFilter = {
+ ...currentFilter,
+ value: [...currentFilter.value, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ } else {
+ // if the current state wasn't an array we make it one and add our value
+ const newFilter = {
+ ...currentFilter,
+ value: [currentFilter.value as string, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ }
+ } else if (!checked) {
+ // if we are removing some value when the running operator is IN we filter.
+ // example - key IN [value1,currentSelectedValue] becomes key IN [value1] in case of array
+ if (isArray(currentFilter.value)) {
+ const newFilter = {
+ ...currentFilter,
+ value: currentFilter.value.filter((val) => val !== value),
+ };
+
+ if (newFilter.value.length === 0) {
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ } else {
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ }
+ } else {
+ // if not an array remove the whole thing altogether!
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ }
+ }
+ break;
+ case 'nin':
+ // if the current running operator is NIN then when unchecking the value it gets
+ // added to the clause like key NIN [value1 , currentUnselectedValue]
+ if (!checked) {
+ // in case of array add the currentUnselectedValue to the list.
+ if (isArray(currentFilter.value)) {
+ const newFilter = {
+ ...currentFilter,
+ value: [...currentFilter.value, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ } else {
+ // in case of not an array make it one!
+ const newFilter = {
+ ...currentFilter,
+ value: [currentFilter.value as string, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ }
+ } else if (checked) {
+ // opposite of above!
+ if (isArray(currentFilter.value)) {
+ const newFilter = {
+ ...currentFilter,
+ value: currentFilter.value.filter((val) => val !== value),
+ };
+
+ if (newFilter.value.length === 0) {
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ } else {
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ }
+ } else {
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ }
+ }
+ break;
+ case '=':
+ if (checked) {
+ const newFilter = {
+ ...currentFilter,
+ op: getOperatorValue(OPERATORS.IN),
+ value: [currentFilter.value as string, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ } else if (!checked) {
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ }
+ break;
+ case '!=':
+ if (!checked) {
+ const newFilter = {
+ ...currentFilter,
+ op: getOperatorValue(OPERATORS.NIN),
+ value: [currentFilter.value as string, value],
+ };
+ query.filters.items = query.filters.items.map((item) => {
+ if (isEqual(item.key?.key, filter.attributeKey.key)) {
+ return newFilter;
+ }
+ return item;
+ });
+ } else if (checked) {
+ query.filters.items = query.filters.items.filter(
+ (item) => !isEqual(item.key?.key, filter.attributeKey.key),
+ );
+ }
+ break;
+ default:
+ break;
+ }
+ }
+ } else {
+ // case - when there is no filter for the current key that means all are selected right now.
+ const newFilterItem: TagFilterItem = {
+ id: uuid(),
+ op: getOperatorValue(OPERATORS.NIN),
+ key: filter.attributeKey,
+ value,
+ };
+ query.filters.items = [...query.filters.items, newFilterItem];
+ }
+ }
+ const finalQuery = {
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: [
+ ...currentQuery.builder.queryData.map((q, idx) => {
+ if (idx === lastUsedQuery) {
+ return query;
+ }
+ return q;
+ }),
+ ],
+ },
+ };
+
+ redirectWithQueryBuilderData(finalQuery);
+ };
+
+ return (
+
+
+
+ {isOpen ? (
+ {
+ setIsOpen(false);
+ setVisibleItemsCount(10);
+ }}
+ />
+ ) : (
+ setIsOpen(true)}
+ cursor="pointer"
+ />
+ )}
+ {filter.title}
+
+
+ {isOpen && (
+
+ Clear All
+
+ )}
+
+
+ {isOpen && isLoading && !attributeValues.length && (
+
+ )}
+ {isOpen && !isLoading && (
+ <>
+
+ {attributeValues.length > 0 ? (
+
+ {currentAttributeKeys.map((value: string) => (
+
+
onChange(value, e.target.checked, false)}
+ checked={currentFilterState[value]}
+ disabled={isFilterDisabled}
+ rootClassName="check-box"
+ />
+
+ {
+ if (isFilterDisabled) {
+ return;
+ }
+ onChange(value, currentFilterState[value], true);
+ }}
+ >
+ {filter.customRendererForValue ? (
+ filter.customRendererForValue(value)
+ ) : (
+
+ {value}
+
+ )}
+
+
+
+
+ ) : (
+
+ )}
+ {visibleItemsCount < attributeValues?.length && (
+
+ setVisibleItemsCount((prev) => prev + 10)}
+ >
+ Show More...
+
+
+ )}
+
+ )}
+
Slider
;
+}
diff --git a/frontend/src/components/QuickFilters/QuickFilters.styles.scss b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
new file mode 100644
index 0000000000..d5c3460891
--- /dev/null
+++ b/frontend/src/components/QuickFilters/QuickFilters.styles.scss
@@ -0,0 +1,93 @@
+.quick-filters {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ border-right: 1px solid var(--bg-slate-400);
+
+ .header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 10.5px;
+ border-bottom: 1px solid var(--bg-slate-400);
+
+ .left-actions {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+
+ .text {
+ color: var(--bg-vanilla-400);
+ font-family: Inter;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px;
+ letter-spacing: -0.07px;
+ }
+
+ .sync-tag {
+ display: flex;
+ padding: 5px 9px;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ border-radius: 2px;
+ border: 1px solid rgba(78, 116, 248, 0.2);
+ background: rgba(78, 116, 248, 0.1);
+ color: var(--bg-robin-500);
+ font-family: 'Geist Mono';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px; /* 128.571% */
+ text-transform: uppercase;
+ }
+ }
+
+ .right-actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+
+ .divider-filter {
+ width: 1px;
+ height: 14px;
+ background: #161922;
+ }
+
+ .sync-icon {
+ background-color: var(--bg-ink-500);
+ border: 0;
+ box-shadow: none;
+ }
+ }
+ }
+}
+
+.lightMode {
+ .quick-filters {
+ background-color: var(--bg-vanilla-100);
+ border-right: 1px solid var(--bg-vanilla-300);
+
+ .header {
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .left-actions {
+ .text {
+ color: var(--bg-ink-400);
+ }
+
+ .sync-icon {
+ background-color: var(--bg-vanilla-100);
+ }
+ }
+ .right-actions {
+ .sync-icon {
+ background-color: var(--bg-vanilla-100);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/components/QuickFilters/QuickFilters.tsx b/frontend/src/components/QuickFilters/QuickFilters.tsx
new file mode 100644
index 0000000000..a706e35aef
--- /dev/null
+++ b/frontend/src/components/QuickFilters/QuickFilters.tsx
@@ -0,0 +1,124 @@
+import './QuickFilters.styles.scss';
+
+import {
+ FilterOutlined,
+ SyncOutlined,
+ VerticalAlignTopOutlined,
+} from '@ant-design/icons';
+import { Tooltip, Typography } from 'antd';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { cloneDeep } from 'lodash-es';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
+
+import Checkbox from './FilterRenderers/Checkbox/Checkbox';
+import Slider from './FilterRenderers/Slider/Slider';
+
+export enum FiltersType {
+ SLIDER = 'SLIDER',
+ CHECKBOX = 'CHECKBOX',
+}
+
+export enum MinMax {
+ MIN = 'MIN',
+ MAX = 'MAX',
+}
+
+export enum SpecficFilterOperations {
+ ALL = 'ALL',
+ ONLY = 'ONLY',
+}
+
+export interface IQuickFiltersConfig {
+ type: FiltersType;
+ title: string;
+ attributeKey: BaseAutocompleteData;
+ customRendererForValue?: (value: string) => JSX.Element;
+ defaultOpen: boolean;
+}
+
+interface IQuickFiltersProps {
+ config: IQuickFiltersConfig[];
+ handleFilterVisibilityChange: () => void;
+}
+
+export default function QuickFilters(props: IQuickFiltersProps): JSX.Element {
+ const { config, handleFilterVisibilityChange } = props;
+
+ const {
+ currentQuery,
+ lastUsedQuery,
+ redirectWithQueryBuilderData,
+ } = useQueryBuilder();
+
+ // clear all the filters for the query which is in sync with filters
+ const handleReset = (): void => {
+ const updatedQuery = cloneDeep(
+ currentQuery?.builder.queryData?.[lastUsedQuery || 0],
+ );
+
+ if (!updatedQuery) {
+ return;
+ }
+
+ if (updatedQuery?.filters?.items) {
+ updatedQuery.filters.items = [];
+ }
+
+ const preparedQuery: Query = {
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: currentQuery.builder.queryData.map((item, idx) => ({
+ ...item,
+ filters: {
+ ...item.filters,
+ items: idx === lastUsedQuery ? [] : [...item.filters.items],
+ },
+ })),
+ },
+ };
+ redirectWithQueryBuilderData(preparedQuery);
+ };
+
+ const lastQueryName =
+ currentQuery.builder.queryData?.[lastUsedQuery || 0]?.queryName;
+ return (
+
+
+
+
+ Filters for
+
+ {lastQueryName}
+
+
+
+
+
+
+ {config.map((filter) => {
+ switch (filter.type) {
+ case FiltersType.CHECKBOX:
+ return ;
+ case FiltersType.SLIDER:
+ return ;
+ default:
+ return ;
+ }
+ })}
+
+
{column.title?.toString()}
c.key === column.key) !== -1}
- onChange={onToggleHandler(index)}
+ onChange={onToggleHandler(index, column)}
/>
),
@@ -86,7 +96,7 @@ function DynamicColumnTable({
return (
- {facingIssueBtn && }
+ {facingIssueBtn && }
{dynamicColumns && (
([]);
@@ -58,14 +60,21 @@ function ResizeTable({
[columnsData, onDragColumn, handleResize],
);
- const tableParams = useMemo(
- () => ({
+ const tableParams = useMemo(() => {
+ const props = {
...restProps,
components: { header: { cell: ResizableHeader } },
columns: mergedColumns,
- }),
- [mergedColumns, restProps],
- );
+ };
+
+ set(
+ props,
+ 'pagination',
+ pagination ? { ...pagination, hideOnSinglePage: true } : false,
+ );
+
+ return props;
+ }, [mergedColumns, pagination, restProps]);
useEffect(() => {
if (columns) {
diff --git a/frontend/src/components/ResizeTable/types.ts b/frontend/src/components/ResizeTable/types.ts
index 35a13127a8..1ad3c3318a 100644
--- a/frontend/src/components/ResizeTable/types.ts
+++ b/frontend/src/components/ResizeTable/types.ts
@@ -2,7 +2,7 @@
import { TableProps } from 'antd';
import { ColumnsType } from 'antd/es/table';
import { ColumnGroupType, ColumnType } from 'antd/lib/table';
-import { FacingIssueBtnProps } from 'components/facingIssueBtn/FacingIssueBtn';
+import { LaunchChatSupportProps } from 'components/LaunchChatSupport/LaunchChatSupport';
import { TableDataSource } from './contants';
@@ -13,7 +13,8 @@ export interface DynamicColumnTableProps extends TableProps {
tablesource: typeof TableDataSource[keyof typeof TableDataSource];
dynamicColumns: TableProps['columns'];
onDragColumn?: (fromIndex: number, toIndex: number) => void;
- facingIssueBtn?: FacingIssueBtnProps;
+ facingIssueBtn?: LaunchChatSupportProps;
+ shouldSendAlertsLogEvent?: boolean;
}
export type GetVisibleColumnsFunction = (
diff --git a/frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss b/frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss
new file mode 100644
index 0000000000..f3c2ea622a
--- /dev/null
+++ b/frontend/src/components/TabsAndFilters/Tabs/Tabs.styles.scss
@@ -0,0 +1,5 @@
+.tab-title {
+ display: flex;
+ gap: 4px;
+ align-items: center;
+}
diff --git a/frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx b/frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx
new file mode 100644
index 0000000000..981c291146
--- /dev/null
+++ b/frontend/src/components/TabsAndFilters/Tabs/Tabs.tsx
@@ -0,0 +1,41 @@
+import './Tabs.styles.scss';
+
+import { Radio } from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import { History, Table } from 'lucide-react';
+import { useState } from 'react';
+
+import { ALERT_TABS } from '../constants';
+
+export function Tabs(): JSX.Element {
+ const [selectedTab, setSelectedTab] = useState('overview');
+
+ const handleTabChange = (e: RadioChangeEvent): void => {
+ setSelectedTab(e.target.value);
+ };
+
+ return (
+
+
+
+
+
+
+
+ History
+
+
+
+ );
+}
diff --git a/frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss b/frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss
new file mode 100644
index 0000000000..5115eabe2e
--- /dev/null
+++ b/frontend/src/components/TabsAndFilters/TabsAndFilters.styles.scss
@@ -0,0 +1,18 @@
+@mixin flex-center {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.tabs-and-filters {
+ @include flex-center;
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ .filters {
+ @include flex-center;
+ gap: 16px;
+ .reset-button {
+ @include flex-center;
+ }
+ }
+}
diff --git a/frontend/src/components/TabsAndFilters/TabsAndFilters.tsx b/frontend/src/components/TabsAndFilters/TabsAndFilters.tsx
new file mode 100644
index 0000000000..ac6738d491
--- /dev/null
+++ b/frontend/src/components/TabsAndFilters/TabsAndFilters.tsx
@@ -0,0 +1,16 @@
+import './TabsAndFilters.styles.scss';
+
+import { Filters } from 'components/AlertDetailsFilters/Filters';
+
+import { Tabs } from './Tabs/Tabs';
+
+function TabsAndFilters(): JSX.Element {
+ return (
+
+
+
+
+ );
+}
+
+export default TabsAndFilters;
diff --git a/frontend/src/components/TabsAndFilters/constants.ts b/frontend/src/components/TabsAndFilters/constants.ts
new file mode 100644
index 0000000000..b052c0e4cf
--- /dev/null
+++ b/frontend/src/components/TabsAndFilters/constants.ts
@@ -0,0 +1,5 @@
+export const ALERT_TABS = {
+ OVERVIEW: 'OVERVIEW',
+ HISTORY: 'HISTORY',
+ ACTIVITY: 'ACTIVITY',
+} as const;
diff --git a/frontend/src/components/Tags/Tags.tsx b/frontend/src/components/Tags/Tags.tsx
index ac38e0e58c..7257594e7e 100644
--- a/frontend/src/components/Tags/Tags.tsx
+++ b/frontend/src/components/Tags/Tags.tsx
@@ -5,7 +5,6 @@ import { Button } from 'antd';
import { Tag } from 'antd/lib';
import Input from 'components/Input';
import { Check, X } from 'lucide-react';
-import { TweenOneGroup } from 'rc-tween-one';
import React, { Dispatch, SetStateAction, useState } from 'react';
function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
@@ -46,41 +45,19 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
func(value);
};
- const forMap = (tag: string): React.ReactElement => (
-
- {
- e.preventDefault();
- handleClose(tag);
- }}
- >
- {tag}
-
-
- );
-
- const tagChild = tags.map(forMap);
-
- const renderTagsAnimated = (): React.ReactElement => (
- {
- if (e.type === 'appear' || e.type === 'enter') {
- (e.target as any).style = 'display: inline-block';
- }
- }}
- >
- {tagChild}
-
- );
-
return (
- {renderTagsAnimated()}
+ {tags.map
((tag) => (
+ handleClose(tag)}
+ >
+ {tag}
+
+ ))}
+
{inputVisible && (
+
{useFilledIcon ? (
) : (
diff --git a/frontend/src/components/TypicalOverlayScrollbar/TypicalOverlayScrollbar.tsx b/frontend/src/components/TypicalOverlayScrollbar/TypicalOverlayScrollbar.tsx
new file mode 100644
index 0000000000..1ed1717d6d
--- /dev/null
+++ b/frontend/src/components/TypicalOverlayScrollbar/TypicalOverlayScrollbar.tsx
@@ -0,0 +1,31 @@
+import './typicalOverlayScrollbar.scss';
+
+import { PartialOptions } from 'overlayscrollbars';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { CSSProperties, ReactElement } from 'react';
+
+interface Props {
+ children: ReactElement;
+ style?: CSSProperties;
+ options?: PartialOptions;
+}
+
+export default function TypicalOverlayScrollbar({
+ children,
+ style,
+ options,
+}: Props): ReturnType {
+ return (
+
+ {children}
+
+ );
+}
+
+TypicalOverlayScrollbar.defaultProps = { style: {}, options: {} };
diff --git a/frontend/src/components/TypicalOverlayScrollbar/typicalOverlayScrollbar.scss b/frontend/src/components/TypicalOverlayScrollbar/typicalOverlayScrollbar.scss
new file mode 100644
index 0000000000..9dd4c3b381
--- /dev/null
+++ b/frontend/src/components/TypicalOverlayScrollbar/typicalOverlayScrollbar.scss
@@ -0,0 +1,3 @@
+.overlay-scrollbar {
+ height: 100%;
+}
diff --git a/frontend/src/components/Uplot/Uplot.tsx b/frontend/src/components/Uplot/Uplot.tsx
index 05f050a87c..af6e28ddf3 100644
--- a/frontend/src/components/Uplot/Uplot.tsx
+++ b/frontend/src/components/Uplot/Uplot.tsx
@@ -1,6 +1,7 @@
/* eslint-disable sonarjs/cognitive-complexity */
import './Uplot.styles.scss';
+import * as Sentry from '@sentry/react';
import { Typography } from 'antd';
import { ToggleGraphProps } from 'components/Graph/types';
import { LineChart } from 'lucide-react';
@@ -13,7 +14,6 @@ import {
useImperativeHandle,
useRef,
} from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
import UPlot from 'uplot';
import { dataMatch, optionsUpdateState } from './utils';
@@ -139,7 +139,7 @@ const Uplot = forwardRef(
}
return (
-
+ }>
{data && data[0] && data[0]?.length === 0 ? (
@@ -147,7 +147,7 @@ const Uplot = forwardRef(
) : null}
)}
diff --git a/frontend/src/components/VirtuosoOverlayScrollbar/VirtuosoOverlayScrollbar.tsx b/frontend/src/components/VirtuosoOverlayScrollbar/VirtuosoOverlayScrollbar.tsx
new file mode 100644
index 0000000000..4f0e905fc2
--- /dev/null
+++ b/frontend/src/components/VirtuosoOverlayScrollbar/VirtuosoOverlayScrollbar.tsx
@@ -0,0 +1,37 @@
+import './virtuosoOverlayScrollbar.scss';
+
+import useInitializeOverlayScrollbar from 'hooks/useInitializeOverlayScrollbar/useInitializeOverlayScrollbar';
+import { PartialOptions } from 'overlayscrollbars';
+import React, { CSSProperties, ReactElement } from 'react';
+
+interface VirtuosoOverlayScrollbarProps {
+ children: ReactElement;
+ style?: CSSProperties;
+ options: PartialOptions;
+}
+
+export default function VirtuosoOverlayScrollbar({
+ children,
+ style,
+ options,
+}: VirtuosoOverlayScrollbarProps): JSX.Element {
+ const { rootRef, setScroller } = useInitializeOverlayScrollbar(options);
+
+ const enhancedChild = React.cloneElement(children, {
+ scrollerRef: setScroller,
+ 'data-overlayscrollbars-initialize': true,
+ });
+
+ return (
+
+ {enhancedChild}
+
+ );
+}
+
+VirtuosoOverlayScrollbar.defaultProps = { style: {} };
diff --git a/frontend/src/components/VirtuosoOverlayScrollbar/virtuosoOverlayScrollbar.scss b/frontend/src/components/VirtuosoOverlayScrollbar/virtuosoOverlayScrollbar.scss
new file mode 100644
index 0000000000..728bd1e8c3
--- /dev/null
+++ b/frontend/src/components/VirtuosoOverlayScrollbar/virtuosoOverlayScrollbar.scss
@@ -0,0 +1,5 @@
+.overlay-scroll-wrapper {
+ height: 100%;
+ width: 100%;
+ overflow: auto;
+}
diff --git a/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx b/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
deleted file mode 100644
index 2a4b07aa22..0000000000
--- a/frontend/src/components/facingIssueBtn/FacingIssueBtn.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import './FacingIssueBtn.style.scss';
-
-import { Button, Tooltip } from 'antd';
-import logEvent from 'api/common/logEvent';
-import cx from 'classnames';
-import { FeatureKeys } from 'constants/features';
-import useFeatureFlags from 'hooks/useFeatureFlag';
-import { defaultTo } from 'lodash-es';
-import { HelpCircle } from 'lucide-react';
-import { isCloudUser } from 'utils/app';
-
-export interface FacingIssueBtnProps {
- eventName: string;
- attributes: Record;
- message?: string;
- buttonText?: string;
- className?: string;
- onHoverText?: string;
-}
-
-function FacingIssueBtn({
- attributes,
- eventName,
- message = '',
- buttonText = '',
- className = '',
- onHoverText = '',
-}: FacingIssueBtnProps): JSX.Element | null {
- const handleFacingIssuesClick = (): void => {
- logEvent(eventName, attributes);
-
- if (window.Intercom) {
- window.Intercom('showNewMessage', defaultTo(message, ''));
- }
- };
-
- const isChatSupportEnabled = useFeatureFlags(FeatureKeys.CHAT_SUPPORT)?.active;
- const isCloudUserVal = isCloudUser();
-
- return isCloudUserVal && isChatSupportEnabled ? ( // Note: we would need to move this condition to license based in future
-
-
- }
- >
- {buttonText || 'Facing issues?'}
-
-
-
- ) : null;
-}
-
-FacingIssueBtn.defaultProps = {
- message: '',
- buttonText: '',
- className: '',
- onHoverText: '',
-};
-
-export default FacingIssueBtn;
diff --git a/frontend/src/constants/env.ts b/frontend/src/constants/env.ts
index 2c5230dfcc..cf75739eff 100644
--- a/frontend/src/constants/env.ts
+++ b/frontend/src/constants/env.ts
@@ -3,4 +3,5 @@ export const ENVIRONMENT = {
process?.env?.FRONTEND_API_ENDPOINT ||
process?.env?.GITPOD_WORKSPACE_URL?.replace('://', '://8080-') ||
'',
+ wsURL: process?.env?.WEBSOCKET_API_ENDPOINT || '',
};
diff --git a/frontend/src/constants/features.ts b/frontend/src/constants/features.ts
index bb905d0d69..769522455d 100644
--- a/frontend/src/constants/features.ts
+++ b/frontend/src/constants/features.ts
@@ -19,6 +19,7 @@ export enum FeatureKeys {
OSS = 'OSS',
ONBOARDING = 'ONBOARDING',
CHAT_SUPPORT = 'CHAT_SUPPORT',
- PLANNED_MAINTENANCE = 'PLANNED_MAINTENANCE',
GATEWAY = 'GATEWAY',
+ PREMIUM_SUPPORT = 'PREMIUM_SUPPORT',
+ QUERY_BUILDER_SEARCH_V2 = 'QUERY_BUILDER_SEARCH_V2',
}
diff --git a/frontend/src/constants/global.ts b/frontend/src/constants/global.ts
index 42fb29720b..dfa096470d 100644
--- a/frontend/src/constants/global.ts
+++ b/frontend/src/constants/global.ts
@@ -1,4 +1,17 @@
+import { ManipulateType } from 'dayjs';
+
const MAX_RPS_LIMIT = 100;
export { MAX_RPS_LIMIT };
export const LEGEND = 'legend';
+
+export const DAYJS_MANIPULATE_TYPES: { [key: string]: ManipulateType } = {
+ DAY: 'day',
+ WEEK: 'week',
+ MONTH: 'month',
+ YEAR: 'year',
+ HOUR: 'hour',
+ MINUTE: 'minute',
+ SECOND: 'second',
+ MILLISECOND: 'millisecond',
+};
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index c7e8b81179..4e6859a2dd 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -19,4 +19,6 @@ export enum LOCALSTORAGE {
SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
+ LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
+ SHOW_LOGS_QUICK_FILTERS = 'SHOW_LOGS_QUICK_FILTERS',
}
diff --git a/frontend/src/constants/panelTypes.ts b/frontend/src/constants/panelTypes.ts
index 7476b20783..8892f0fcbe 100644
--- a/frontend/src/constants/panelTypes.ts
+++ b/frontend/src/constants/panelTypes.ts
@@ -40,4 +40,5 @@ export const getComponentForPanelType = (
export const AVAILABLE_EXPORT_PANEL_TYPES = [
PANEL_TYPES.TIME_SERIES,
PANEL_TYPES.TABLE,
+ PANEL_TYPES.LIST,
];
diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index 9b731ca089..3ee0a39634 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -32,4 +32,8 @@ export enum QueryParams {
relativeTime = 'relativeTime',
alertType = 'alertType',
ruleId = 'ruleId',
+ consumerGrp = 'consumerGrp',
+ topic = 'topic',
+ partition = 'partition',
+ selectedTimelineQuery = 'selectedTimelineQuery',
}
diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts
index 7b7b464b3e..5fe7112796 100644
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -52,7 +52,7 @@ export const selectValueDivider = '__';
export const baseAutoCompleteIdKeysOrder: (keyof Omit<
BaseAutocompleteData,
- 'id' | 'isJSON'
+ 'id' | 'isJSON' | 'isIndexed'
>)[] = ['key', 'dataType', 'type', 'isColumn'];
export const autocompleteType: Record = {
@@ -71,6 +71,7 @@ export const alphabet: string[] = alpha.map((str) => String.fromCharCode(str));
export enum QueryBuilderKeys {
GET_AGGREGATE_ATTRIBUTE = 'GET_AGGREGATE_ATTRIBUTE',
GET_AGGREGATE_KEYS = 'GET_AGGREGATE_KEYS',
+ GET_ATTRIBUTE_SUGGESTIONS = 'GET_ATTRIBUTE_SUGGESTIONS',
}
export const mapOfOperators = {
diff --git a/frontend/src/constants/queryFunctionOptions.ts b/frontend/src/constants/queryFunctionOptions.ts
index 4aa6332d67..4a7b3b0413 100644
--- a/frontend/src/constants/queryFunctionOptions.ts
+++ b/frontend/src/constants/queryFunctionOptions.ts
@@ -23,6 +23,10 @@ export const metricQueryFunctionOptions: SelectOption[] = [
value: QueryFunctionsTypes.ABSOLUTE,
label: 'Absolute',
},
+ {
+ value: QueryFunctionsTypes.RUNNING_DIFF,
+ label: 'Running Diff',
+ },
{
value: QueryFunctionsTypes.LOG_2,
label: 'Log2',
@@ -103,6 +107,9 @@ export const queryFunctionsTypesConfig: QueryFunctionConfigType = {
absolute: {
showInput: false,
},
+ runningDiff: {
+ showInput: false,
+ },
log2: {
showInput: false,
},
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index 63fc205d81..ec2353abbf 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -8,4 +8,14 @@ export const REACT_QUERY_KEY = {
GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
DELETE_DASHBOARD: 'DELETE_DASHBOARD',
LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
+ ALERT_RULE_DETAILS: 'ALERT_RULE_DETAILS',
+ ALERT_RULE_STATS: 'ALERT_RULE_STATS',
+ ALERT_RULE_TOP_CONTRIBUTORS: 'ALERT_RULE_TOP_CONTRIBUTORS',
+ ALERT_RULE_TIMELINE_TABLE: 'ALERT_RULE_TIMELINE_TABLE',
+ ALERT_RULE_TIMELINE_GRAPH: 'ALERT_RULE_TIMELINE_GRAPH',
+ GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
+ TOGGLE_ALERT_STATE: 'TOGGLE_ALERT_STATE',
+ GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
+ REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
+ DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 243bdd0bba..b4f43ee684 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -13,6 +13,7 @@ const ROUTES = {
GET_STARTED_INFRASTRUCTURE_MONITORING:
'/get-started/infrastructure-monitoring',
GET_STARTED_AWS_MONITORING: '/get-started/aws-monitoring',
+ GET_STARTED_AZURE_MONITORING: '/get-started/azure-monitoring',
USAGE_EXPLORER: '/usage-explorer',
APPLICATION: '/services',
ALL_DASHBOARD: '/dashboard',
@@ -21,6 +22,8 @@ const ROUTES = {
EDIT_ALERTS: '/alerts/edit',
LIST_ALL_ALERT: '/alerts',
ALERTS_NEW: '/alerts/new',
+ ALERT_HISTORY: '/alerts/history',
+ ALERT_OVERVIEW: '/alerts/overview',
ALL_CHANNELS: '/settings/channels',
CHANNELS_NEW: '/settings/channels/new',
CHANNELS_EDIT: '/settings/channels/:id',
@@ -53,6 +56,8 @@ const ROUTES = {
WORKSPACE_LOCKED: '/workspace-locked',
SHORTCUTS: '/shortcuts',
INTEGRATIONS: '/integrations',
+ MESSAGING_QUEUES: '/messaging-queues',
+ MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
} as const;
export default ROUTES;
diff --git a/frontend/src/constants/shortcuts/globalShortcuts.ts b/frontend/src/constants/shortcuts/globalShortcuts.ts
index 81420fc830..4ab7752fac 100644
--- a/frontend/src/constants/shortcuts/globalShortcuts.ts
+++ b/frontend/src/constants/shortcuts/globalShortcuts.ts
@@ -9,6 +9,7 @@ export const GlobalShortcuts = {
NavigateToDashboards: 'd+shift',
NavigateToAlerts: 'a+shift',
NavigateToExceptions: 'e+shift',
+ NavigateToMessagingQueues: 'm+shift',
};
export const GlobalShortcutsName = {
@@ -19,6 +20,7 @@ export const GlobalShortcutsName = {
NavigateToDashboards: 'shift+d',
NavigateToAlerts: 'shift+a',
NavigateToExceptions: 'shift+e',
+ NavigateToMessagingQueues: 'shift+m',
};
export const GlobalShortcutsDescription = {
@@ -29,4 +31,5 @@ export const GlobalShortcutsDescription = {
NavigateToDashboards: 'Navigate to dashboards page',
NavigateToAlerts: 'Navigate to alerts page',
NavigateToExceptions: 'Navigate to Exceptions page',
+ NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
};
diff --git a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
index 33c2b4061f..68331a4c2d 100644
--- a/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
+++ b/frontend/src/constants/shortcuts/logsExplorerShortcuts.ts
@@ -4,6 +4,7 @@ const userOS = getUserOperatingSystem();
export const LogsExplorerShortcuts = {
StageAndRunQuery: 'enter+meta',
FocusTheSearchBar: 's',
+ ShowAllFilters: '/+meta',
};
export const LogsExplorerShortcutsName = {
@@ -11,9 +12,11 @@ export const LogsExplorerShortcutsName = {
userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
}+enter`,
FocusTheSearchBar: 's',
+ ShowAllFilters: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+/`,
};
export const LogsExplorerShortcutsDescription = {
StageAndRunQuery: 'Stage and Run the current query',
FocusTheSearchBar: 'Shift the focus to the last query filter bar',
+ ShowAllFilters: 'Toggle all filters in the filters dropdown',
};
diff --git a/frontend/src/container/AlertHistory/AlertHistory.styles.scss b/frontend/src/container/AlertHistory/AlertHistory.styles.scss
new file mode 100644
index 0000000000..39fce3ca29
--- /dev/null
+++ b/frontend/src/container/AlertHistory/AlertHistory.styles.scss
@@ -0,0 +1,5 @@
+.alert-history {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
diff --git a/frontend/src/container/AlertHistory/AlertHistory.tsx b/frontend/src/container/AlertHistory/AlertHistory.tsx
new file mode 100644
index 0000000000..0776cfcebb
--- /dev/null
+++ b/frontend/src/container/AlertHistory/AlertHistory.tsx
@@ -0,0 +1,22 @@
+import './AlertHistory.styles.scss';
+
+import { useState } from 'react';
+
+import Statistics from './Statistics/Statistics';
+import Timeline from './Timeline/Timeline';
+
+function AlertHistory(): JSX.Element {
+ const [totalCurrentTriggers, setTotalCurrentTriggers] = useState(0);
+
+ return (
+
+
+
+
+ );
+}
+
+export default AlertHistory;
diff --git a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss
new file mode 100644
index 0000000000..144996ba38
--- /dev/null
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.styles.scss
@@ -0,0 +1,21 @@
+.alert-popover-trigger-action {
+ cursor: pointer;
+}
+
+.alert-history-popover {
+ .ant-popover-inner {
+ border: 1px solid var(--bg-slate-400);
+
+ .lightMode & {
+ background: var(--bg-vanilla-100) !important;
+ border: 1px solid var(--bg-vanilla-300);
+ }
+ }
+ .ant-popover-arrow {
+ &::before {
+ .lightMode & {
+ background: var(--bg-vanilla-100);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
new file mode 100644
index 0000000000..d70da07903
--- /dev/null
+++ b/frontend/src/container/AlertHistory/AlertPopover/AlertPopover.tsx
@@ -0,0 +1,115 @@
+import './AlertPopover.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Popover } from 'antd';
+import LogsIcon from 'assets/AlertHistory/LogsIcon';
+import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { DraftingCompass } from 'lucide-react';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+type Props = {
+ children: React.ReactNode;
+ relatedTracesLink?: string;
+ relatedLogsLink?: string;
+};
+
+function PopoverContent({
+ relatedTracesLink,
+ relatedLogsLink,
+}: {
+ relatedTracesLink?: Props['relatedTracesLink'];
+ relatedLogsLink?: Props['relatedLogsLink'];
+}): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+ return (
+
+ {!!relatedLogsLink && (
+
+
+
+
+
View Logs
+
+ )}
+ {!!relatedTracesLink && (
+
+
+
+
+
View Traces
+
+ )}
+
+
+ }
+ trigger="click"
+ >
+ {children}
+
+
{children}
;
+}
+export default AlertPopover;
diff --git a/frontend/src/container/AlertHistory/Statistics/AverageResolutionCard/AverageResolutionCard.tsx b/frontend/src/container/AlertHistory/Statistics/AverageResolutionCard/AverageResolutionCard.tsx
new file mode 100644
index 0000000000..f55c4385ce
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/AverageResolutionCard/AverageResolutionCard.tsx
@@ -0,0 +1,28 @@
+import { AlertRuleStats } from 'types/api/alerts/def';
+import { formatTime } from 'utils/timeUtils';
+
+import StatsCard from '../StatsCard/StatsCard';
+
+type TotalTriggeredCardProps = {
+ currentAvgResolutionTime: AlertRuleStats['currentAvgResolutionTime'];
+ pastAvgResolutionTime: AlertRuleStats['pastAvgResolutionTime'];
+ timeSeries: AlertRuleStats['currentAvgResolutionTimeSeries']['values'];
+};
+
+function AverageResolutionCard({
+ currentAvgResolutionTime,
+ pastAvgResolutionTime,
+ timeSeries,
+}: TotalTriggeredCardProps): JSX.Element {
+ return (
+
+ );
+}
+
+export default AverageResolutionCard;
diff --git a/frontend/src/container/AlertHistory/Statistics/Statistics.styles.scss b/frontend/src/container/AlertHistory/Statistics/Statistics.styles.scss
new file mode 100644
index 0000000000..cc0a5b1b43
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/Statistics.styles.scss
@@ -0,0 +1,14 @@
+.statistics {
+ display: flex;
+ justify-content: space-between;
+ height: 280px;
+ border: 1px solid var(--bg-slate-500);
+ border-radius: 4px;
+ margin: 0 16px;
+}
+
+.lightMode {
+ .statistics {
+ border: 1px solid var(--bg-vanilla-300);
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Statistics/Statistics.tsx b/frontend/src/container/AlertHistory/Statistics/Statistics.tsx
new file mode 100644
index 0000000000..7158e0c069
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/Statistics.tsx
@@ -0,0 +1,23 @@
+import './Statistics.styles.scss';
+
+import { AlertRuleStats } from 'types/api/alerts/def';
+
+import StatsCardsRenderer from './StatsCardsRenderer/StatsCardsRenderer';
+import TopContributorsRenderer from './TopContributorsRenderer/TopContributorsRenderer';
+
+function Statistics({
+ setTotalCurrentTriggers,
+ totalCurrentTriggers,
+}: {
+ setTotalCurrentTriggers: (value: number) => void;
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+}): JSX.Element {
+ return (
+
+
+
+
+ );
+}
+
+export default Statistics;
diff --git a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
new file mode 100644
index 0000000000..bb9d3c3e72
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss
@@ -0,0 +1,112 @@
+.stats-card {
+ width: 21.7%;
+ border-right: 1px solid var(--bg-slate-500);
+ padding: 9px 12px 13px;
+
+ &--empty {
+ justify-content: normal;
+ }
+
+ &__title-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .title {
+ text-transform: uppercase;
+ font-size: 13px;
+ line-height: 22px;
+ color: var(--bg-vanilla-400);
+ font-weight: 500;
+ }
+ .duration-indicator {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ .icon {
+ display: flex;
+ align-self: center;
+ }
+ .text {
+ text-transform: uppercase;
+ color: var(--text-slate-200);
+ font-size: 12px;
+ font-weight: 600;
+ letter-spacing: 0.48px;
+ }
+ }
+ }
+ &__stats {
+ margin-top: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ .count-label {
+ color: var(--text-vanilla-100);
+ font-family: 'Geist Mono';
+ font-size: 24px;
+ line-height: 36px;
+ }
+ }
+ &__graph {
+ margin-top: 80px;
+
+ .graph {
+ width: 100%;
+ height: 72px;
+ }
+ }
+}
+
+.change-percentage {
+ width: max-content;
+ display: flex;
+ padding: 4px 8px;
+ border-radius: 20px;
+ align-items: center;
+ gap: 4px;
+
+ &--success {
+ background: rgba(37, 225, 146, 0.1);
+ color: var(--bg-forest-500);
+ }
+ &--error {
+ background: rgba(229, 72, 77, 0.1);
+ color: var(--bg-cherry-500);
+ }
+ &--no-previous-data {
+ color: var(--text-robin-500);
+ background: rgba(78, 116, 248, 0.1);
+ padding: 4px 16px;
+ }
+ &__icon {
+ display: flex;
+ align-self: center;
+ }
+ &__label {
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 16px;
+ }
+}
+
+.lightMode {
+ .stats-card {
+ border-color: var(--bg-vanilla-300);
+ &__title-wrapper {
+ .title {
+ color: var(--text-ink-400);
+ }
+ .duration-indicator {
+ .text {
+ color: var(--text-ink-200);
+ }
+ }
+ }
+ &__stats {
+ .count-label {
+ color: var(--text-ink-100);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
new file mode 100644
index 0000000000..f204579f93
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.tsx
@@ -0,0 +1,158 @@
+import './StatsCard.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Tooltip } from 'antd';
+import { QueryParams } from 'constants/query';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { ArrowDownLeft, ArrowUpRight, Calendar } from 'lucide-react';
+import { AlertRuleStats } from 'types/api/alerts/def';
+import { calculateChange } from 'utils/calculateChange';
+
+import StatsGraph from './StatsGraph/StatsGraph';
+import {
+ convertTimestampToLocaleDateString,
+ extractDayFromTimestamp,
+} from './utils';
+
+type ChangePercentageProps = {
+ percentage: number;
+ direction: number;
+ duration: string | null;
+};
+function ChangePercentage({
+ percentage,
+ direction,
+ duration,
+}: ChangePercentageProps): JSX.Element {
+ if (direction > 0) {
+ return (
+
+
+
+ {percentage}% vs Last {duration}
+
+
+
+
+ {percentage}% vs Last {duration}
+
+
+
+
{title}
+
+
+
+
+ {relativeTime ? (
+
{displayTime}
+ ) : (
+
+ {displayTime}
+
+ )}
+
+
+
+
+
+ {isEmpty ? emptyMessage : displayValue || totalCurrentCount}
+
+
+
+
+
+
+
+ {!isEmpty && timeSeries.length > 1 && (
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default StatsGraph;
diff --git a/frontend/src/container/AlertHistory/Statistics/StatsCard/utils.ts b/frontend/src/container/AlertHistory/Statistics/StatsCard/utils.ts
new file mode 100644
index 0000000000..a2584aad37
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCard/utils.ts
@@ -0,0 +1,12 @@
+export const extractDayFromTimestamp = (timestamp: string | null): string => {
+ if (!timestamp) return '';
+ const date = new Date(parseInt(timestamp, 10));
+ return date.getDate().toString();
+};
+
+export const convertTimestampToLocaleDateString = (
+ timestamp: string | null,
+): string => {
+ if (!timestamp) return '';
+ return new Date(parseInt(timestamp, 10)).toLocaleString();
+};
diff --git a/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx b/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
new file mode 100644
index 0000000000..e8859131df
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/StatsCardsRenderer/StatsCardsRenderer.tsx
@@ -0,0 +1,102 @@
+import { useGetAlertRuleDetailsStats } from 'pages/AlertDetails/hooks';
+import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { useEffect } from 'react';
+
+import AverageResolutionCard from '../AverageResolutionCard/AverageResolutionCard';
+import StatsCard from '../StatsCard/StatsCard';
+import TotalTriggeredCard from '../TotalTriggeredCard/TotalTriggeredCard';
+
+const hasTotalTriggeredStats = (
+ totalCurrentTriggers: number | string,
+ totalPastTriggers: number | string,
+): boolean =>
+ (Number(totalCurrentTriggers) > 0 && Number(totalPastTriggers) > 0) ||
+ Number(totalCurrentTriggers) > 0;
+
+const hasAvgResolutionTimeStats = (
+ currentAvgResolutionTime: number | string,
+ pastAvgResolutionTime: number | string,
+): boolean =>
+ (Number(currentAvgResolutionTime) > 0 && Number(pastAvgResolutionTime) > 0) ||
+ Number(currentAvgResolutionTime) > 0;
+
+type StatsCardsRendererProps = {
+ setTotalCurrentTriggers: (value: number) => void;
+};
+
+// TODO(shaheer): render the DataStateRenderer inside the TotalTriggeredCard/AverageResolutionCard, it should display the title
+function StatsCardsRenderer({
+ setTotalCurrentTriggers,
+}: StatsCardsRendererProps): JSX.Element {
+ const {
+ isLoading,
+ isRefetching,
+ isError,
+ data,
+ isValidRuleId,
+ ruleId,
+ } = useGetAlertRuleDetailsStats();
+
+ useEffect(() => {
+ if (data?.payload?.data?.totalCurrentTriggers !== undefined) {
+ setTotalCurrentTriggers(data.payload.data.totalCurrentTriggers);
+ }
+ }, [data, setTotalCurrentTriggers]);
+
+ return (
+
+ {(data): JSX.Element => {
+ const {
+ currentAvgResolutionTime,
+ pastAvgResolutionTime,
+ totalCurrentTriggers,
+ totalPastTriggers,
+ currentAvgResolutionTimeSeries,
+ currentTriggersSeries,
+ } = data;
+
+ return (
+ <>
+ {hasTotalTriggeredStats(totalCurrentTriggers, totalPastTriggers) ? (
+
+ ) : (
+
+ )}
+
+ {hasAvgResolutionTimeStats(
+ currentAvgResolutionTime,
+ pastAvgResolutionTime,
+ ) ? (
+
+ ) : (
+
+ )}
+
+ );
+ }}
+
+ );
+}
+
+export default StatsCardsRenderer;
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss
new file mode 100644
index 0000000000..0b0995fb3e
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.styles.scss
@@ -0,0 +1,213 @@
+.top-contributors-card {
+ width: 56.6%;
+ overflow: hidden;
+
+ &--view-all {
+ width: auto;
+ }
+ &__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+
+ border-bottom: 1px solid var(--bg-slate-500);
+ .title {
+ color: var(--text-vanilla-400);
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 22px;
+ letter-spacing: 0.52px;
+ text-transform: uppercase;
+ }
+ .view-all {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ cursor: pointer;
+ padding: 0;
+ height: 20px;
+ &:hover {
+ background-color: transparent !important;
+ }
+
+ .label {
+ color: var(--text-vanilla-400);
+ font-size: 14px;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ }
+ .icon {
+ display: flex;
+ }
+ }
+ }
+ .contributors-row {
+ height: 80px;
+ }
+ &__content {
+ .ant-table {
+ &-cell {
+ padding: 12px !important;
+ }
+ }
+ .contributors-row {
+ background: var(--bg-ink-500);
+
+ td {
+ border: none !important;
+ }
+ &:not(:last-of-type) td {
+ border-bottom: 1px solid var(--bg-slate-500) !important;
+ }
+ }
+ .total-contribution {
+ color: var(--text-robin-500);
+ font-family: 'Geist Mono';
+ font-size: 12px;
+ font-weight: 500;
+ letter-spacing: -0.06px;
+ padding: 4px 8px;
+ background: rgba(78, 116, 248, 0.1);
+ border-radius: 50px;
+ width: max-content;
+ }
+ }
+ .empty-content {
+ margin: 16px 12px;
+ padding: 40px 45px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ border: 1px dashed var(--bg-slate-500);
+ border-radius: 6px;
+
+ &__icon {
+ font-family: Inter;
+ font-size: 20px;
+ line-height: 26px;
+ letter-spacing: -0.103px;
+ }
+ &__text {
+ color: var(--text-vanilla-400);
+ line-height: 18px;
+ .bold-text {
+ color: var(--text-vanilla-100);
+ font-weight: 500;
+ }
+ }
+ &__button-wrapper {
+ margin-top: 12px;
+ .configure-alert-rule-button {
+ padding: 8px 16px;
+ border-radius: 2px;
+ background: var(--bg-slate-400);
+ border-width: 0;
+ color: var(--text-vanilla-100);
+ line-height: 24px;
+ font-size: 12px;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ }
+ }
+ }
+}
+
+.ant-popover-inner:has(.contributor-row-popover-buttons) {
+ padding: 0 !important;
+}
+.contributor-row-popover-buttons {
+ display: flex;
+ flex-direction: column;
+
+ &__button {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 12px 15px;
+ color: var(--text-vanilla-400);
+ font-size: 14px;
+ letter-spacing: 0.14px;
+ width: 160px;
+ cursor: pointer;
+
+ .text,
+ .icon {
+ color: var(--text-vanilla-100);
+
+ .lightMode & {
+ color: var(--text-ink-500);
+ }
+ }
+
+ &:hover {
+ background: var(--bg-slate-400);
+
+ .text,
+ .icon {
+ color: var(--text-vanilla-100);
+
+ .lightMode & {
+ color: var(--text-ink-500);
+ }
+ }
+ }
+
+ .icon {
+ display: flex;
+ }
+
+ .lightMode & {
+ background: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-400);
+ }
+ }
+}
+
+.view-all-drawer {
+ border-radius: 4px;
+}
+
+.lightMode {
+ .ant-table {
+ background: inherit;
+ }
+
+ .top-contributors-card {
+ &__header {
+ border-color: var(--bg-vanilla-300);
+ .title {
+ color: var(--text-ink-400);
+ }
+ .view-all {
+ .label {
+ color: var(--text-ink-400);
+ }
+ }
+ }
+ &__content {
+ .contributors-row {
+ background: inherit;
+ &:not(:last-of-type) td {
+ border-bottom: 1px solid var(--bg-vanilla-300) !important;
+ }
+ }
+ }
+ .empty-content {
+ border-color: var(--bg-vanilla-300);
+ &__text {
+ color: var(--text-ink-400);
+ .bold-text {
+ color: var(--text-ink-500);
+ }
+ }
+ &__button-wrapper {
+ .configure-alert-rule-button {
+ background: var(--bg-vanilla-300);
+ color: var(--text-ink-500);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
new file mode 100644
index 0000000000..d3cd0bb756
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx
@@ -0,0 +1,84 @@
+import './TopContributorsCard.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import history from 'lib/history';
+import { ArrowRight } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import TopContributorsContent from './TopContributorsContent';
+import { TopContributorsCardProps } from './types';
+import ViewAllDrawer from './ViewAllDrawer';
+
+function TopContributorsCard({
+ topContributorsData,
+ totalCurrentTriggers,
+}: TopContributorsCardProps): JSX.Element {
+ const { search } = useLocation();
+ const searchParams = useMemo(() => new URLSearchParams(search), [search]);
+
+ const viewAllTopContributorsParam = searchParams.get('viewAllTopContributors');
+
+ const [isViewAllVisible, setIsViewAllVisible] = useState(
+ !!viewAllTopContributorsParam ?? false,
+ );
+
+ const isDarkMode = useIsDarkMode();
+
+ const toggleViewAllParam = (isOpen: boolean): void => {
+ if (isOpen) {
+ searchParams.set('viewAllTopContributors', 'true');
+ } else {
+ searchParams.delete('viewAllTopContributors');
+ }
+ };
+
+ const toggleViewAllDrawer = (): void => {
+ setIsViewAllVisible((prev) => {
+ const newState = !prev;
+
+ toggleViewAllParam(newState);
+
+ return newState;
+ });
+ history.push({ search: searchParams.toString() });
+ };
+
+ return (
+ <>
+
+
+
top contributors
+ {topContributorsData.length > 3 && (
+
+ )}
+
+
+
+
+
ℹ️
+
+ Top contributors highlight the most frequently triggering group-by
+ attributes in multi-dimensional alerts
+
+
+
+
+ );
+}
+
+export default TopContributorsContent;
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
new file mode 100644
index 0000000000..85857605f8
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
@@ -0,0 +1,87 @@
+import { Color } from '@signozhq/design-tokens';
+import { Progress, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
+import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
+import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+
+function TopContributorsRows({
+ topContributors,
+ totalCurrentTriggers,
+}: {
+ topContributors: AlertRuleTopContributors[];
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+}): JSX.Element {
+ const columns: ColumnsType = [
+ {
+ title: 'labels',
+ dataIndex: 'labels',
+ key: 'labels',
+ width: '51%',
+ render: (
+ labels: AlertRuleTopContributors['labels'],
+ record,
+ ): JSX.Element => (
+
+
+
+ ),
+ },
+ {
+ title: 'progressBar',
+ dataIndex: 'count',
+ key: 'progressBar',
+ width: '39%',
+ render: (count: AlertRuleTopContributors['count'], record): JSX.Element => (
+
+
+
+ ),
+ },
+ {
+ title: 'count',
+ dataIndex: 'count',
+ key: 'count',
+ width: '10%',
+ render: (count: AlertRuleTopContributors['count'], record): JSX.Element => (
+
+
+ {count}/{totalCurrentTriggers}
+
+
+ ),
+ },
+ ];
+
+ return (
+ `top-contributor-${row.fingerprint}`}
+ columns={columns}
+ showHeader={false}
+ dataSource={topContributors}
+ pagination={
+ topContributors.length > 10 ? { showTotal: PaginationInfoText } : false
+ }
+ />
+ );
+}
+
+export default TopContributorsRows;
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
new file mode 100644
index 0000000000..1d49c87afd
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/ViewAllDrawer.tsx
@@ -0,0 +1,46 @@
+import { Color } from '@signozhq/design-tokens';
+import { Drawer } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+
+import TopContributorsRows from './TopContributorsRows';
+
+function ViewAllDrawer({
+ isViewAllVisible,
+ toggleViewAllDrawer,
+ totalCurrentTriggers,
+ topContributorsData,
+}: {
+ isViewAllVisible: boolean;
+ toggleViewAllDrawer: () => void;
+ topContributorsData: AlertRuleTopContributors[];
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+}): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+ return (
+
+
+
+ );
+}
+
+export default ViewAllDrawer;
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/types.ts b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/types.ts
new file mode 100644
index 0000000000..f44d2ded99
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/types.ts
@@ -0,0 +1,6 @@
+import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+
+export type TopContributorsCardProps = {
+ topContributorsData: AlertRuleTopContributors[];
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+};
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
new file mode 100644
index 0000000000..b773579ca0
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsRenderer/TopContributorsRenderer.tsx
@@ -0,0 +1,42 @@
+import { useGetAlertRuleDetailsTopContributors } from 'pages/AlertDetails/hooks';
+import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+import { AlertRuleStats } from 'types/api/alerts/def';
+
+import TopContributorsCard from '../TopContributorsCard/TopContributorsCard';
+
+type TopContributorsRendererProps = {
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+};
+
+function TopContributorsRenderer({
+ totalCurrentTriggers,
+}: TopContributorsRendererProps): JSX.Element {
+ const {
+ isLoading,
+ isRefetching,
+ isError,
+ data,
+ isValidRuleId,
+ ruleId,
+ } = useGetAlertRuleDetailsTopContributors();
+ const response = data?.payload?.data;
+
+ // TODO(shaheer): render the DataStateRenderer inside the TopContributorsCard, it should display the title and view all
+ return (
+
+ {(topContributorsData): JSX.Element => (
+
+ )}
+
+ );
+}
+
+export default TopContributorsRenderer;
diff --git a/frontend/src/container/AlertHistory/Statistics/TotalTriggeredCard/TotalTriggeredCard.tsx b/frontend/src/container/AlertHistory/Statistics/TotalTriggeredCard/TotalTriggeredCard.tsx
new file mode 100644
index 0000000000..0e4f412894
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Statistics/TotalTriggeredCard/TotalTriggeredCard.tsx
@@ -0,0 +1,26 @@
+import { AlertRuleStats } from 'types/api/alerts/def';
+
+import StatsCard from '../StatsCard/StatsCard';
+
+type TotalTriggeredCardProps = {
+ totalCurrentTriggers: AlertRuleStats['totalCurrentTriggers'];
+ totalPastTriggers: AlertRuleStats['totalPastTriggers'];
+ timeSeries: AlertRuleStats['currentTriggersSeries']['values'];
+};
+
+function TotalTriggeredCard({
+ totalCurrentTriggers,
+ totalPastTriggers,
+ timeSeries,
+}: TotalTriggeredCardProps): JSX.Element {
+ return (
+
+ );
+}
+
+export default TotalTriggeredCard;
diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.styles.scss b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.styles.scss
new file mode 100644
index 0000000000..3ea30fe25a
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.styles.scss
@@ -0,0 +1,52 @@
+.timeline-graph {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ background: var(--bg-ink-400);
+ padding: 12px;
+ border-radius: 4px;
+ border: 1px solid var(--bg-slate-500);
+ height: 150px;
+
+ &__title {
+ width: max-content;
+ padding: 2px 8px;
+ border-radius: 4px;
+ border: 1px solid #1d212d;
+ background: rgba(29, 33, 45, 0.5);
+ color: #ebebeb;
+ font-size: 12px;
+ line-height: 18px;
+ letter-spacing: -0.06px;
+ }
+ &__chart {
+ .chart-placeholder {
+ width: 100%;
+ height: 52px;
+ background: rgba(255, 255, 255, 0.1215686275);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .chart-icon {
+ font-size: 2rem;
+ }
+ }
+ }
+}
+
+.lightMode {
+ .timeline-graph {
+ background: var(--bg-vanilla-200);
+ border-color: var(--bg-vanilla-300);
+ &__title {
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-400);
+ border-color: var(--bg-vanilla-300);
+ }
+ &__chart {
+ .chart-placeholder {
+ background: var(--bg-vanilla-300);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
new file mode 100644
index 0000000000..5adf1c481a
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
@@ -0,0 +1,181 @@
+import { Color } from '@signozhq/design-tokens';
+import Uplot from 'components/Uplot';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
+import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
+import { useMemo, useRef } from 'react';
+import { AlertRuleTimelineGraphResponse } from 'types/api/alerts/def';
+import uPlot, { AlignedData } from 'uplot';
+
+import { ALERT_STATUS, TIMELINE_OPTIONS } from './constants';
+
+type Props = { type: string; data: AlertRuleTimelineGraphResponse[] };
+
+function HorizontalTimelineGraph({
+ width,
+ isDarkMode,
+ data,
+}: {
+ width: number;
+ isDarkMode: boolean;
+ data: AlertRuleTimelineGraphResponse[];
+}): JSX.Element {
+ const transformedData: AlignedData = useMemo(() => {
+ if (!data?.length) {
+ return [[], []];
+ }
+
+ // add an entry for the end time of the last entry to make sure the graph displays all the data
+
+ const timestamps = [
+ ...data.map((item) => item.start / 1000),
+ data[data.length - 1].end / 1000, // end value of last entry
+ ];
+
+ const states = [
+ ...data.map((item) => ALERT_STATUS[item.state]),
+ ALERT_STATUS[data[data.length - 1].state], // Same state as the last entry
+ ];
+
+ return [timestamps, states];
+ }, [data]);
+
+ const options: uPlot.Options = useMemo(
+ () => ({
+ width,
+ height: 85,
+ cursor: { show: false },
+
+ axes: [
+ {
+ gap: 10,
+ stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
+ },
+ { show: false },
+ ],
+ legend: {
+ show: false,
+ },
+ padding: [null, 0, null, 0],
+ series: [
+ {
+ label: 'Time',
+ },
+ {
+ label: 'States',
+ },
+ ],
+ plugins:
+ transformedData?.length > 1
+ ? [
+ timelinePlugin({
+ count: transformedData.length - 1,
+ ...TIMELINE_OPTIONS,
+ }),
+ ]
+ : [],
+ }),
+ [width, isDarkMode, transformedData],
+ );
+ return ;
+}
+
+const transformVerticalTimelineGraph = (data: any[]): any => [
+ data.map((item: { timestamp: any }) => item.timestamp),
+ Array(data.length).fill(0),
+ Array(data.length).fill(10),
+ Array(data.length).fill([0, 1, 2, 3, 4, 5]),
+ data.map((item: { value: number }) => {
+ const count = Math.floor(item.value / 10);
+ return [...Array(count).fill(1), 2];
+ }),
+];
+
+const datatest: any[] = [];
+const now = Math.floor(Date.now() / 1000); // current timestamp in seconds
+const oneDay = 24 * 60 * 60; // one day in seconds
+
+for (let i = 0; i < 90; i++) {
+ const timestamp = now - i * oneDay;
+ const startOfDay = timestamp - (timestamp % oneDay);
+ datatest.push({
+ timestamp: startOfDay,
+ value: Math.floor(Math.random() * 30) + 1,
+ });
+}
+
+function VerticalTimelineGraph({
+ isDarkMode,
+ width,
+}: {
+ width: number;
+ isDarkMode: boolean;
+}): JSX.Element {
+ const transformedData = useMemo(
+ () => transformVerticalTimelineGraph(datatest),
+ [],
+ );
+
+ const options: uPlot.Options = useMemo(
+ () => ({
+ width,
+ height: 90,
+ plugins: [heatmapPlugin()],
+ cursor: { show: false },
+ legend: {
+ show: false,
+ },
+ axes: [
+ {
+ gap: 10,
+ stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
+ },
+ { show: false },
+ ],
+ series: [
+ {},
+ {
+ paths: (): null => null,
+ points: { show: false },
+ },
+ {
+ paths: (): null => null,
+ points: { show: false },
+ },
+ ],
+ }),
+ [isDarkMode, width],
+ );
+ return ;
+}
+
+function Graph({ type, data }: Props): JSX.Element | null {
+ const graphRef = useRef(null);
+
+ const isDarkMode = useIsDarkMode();
+
+ const containerDimensions = useResizeObserver(graphRef);
+
+ if (type === 'horizontal') {
+ return (
+
+
+
+ );
+ }
+ return (
+
+
+
+ );
+}
+
+export default Graph;
diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/constants.ts b/frontend/src/container/AlertHistory/Timeline/Graph/constants.ts
new file mode 100644
index 0000000000..b56499a0d0
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/constants.ts
@@ -0,0 +1,33 @@
+import { Color } from '@signozhq/design-tokens';
+
+export const ALERT_STATUS: { [key: string]: number } = {
+ firing: 0,
+ inactive: 1,
+ normal: 1,
+ 'no-data': 2,
+ disabled: 3,
+ muted: 4,
+};
+
+export const STATE_VS_COLOR: {
+ [key: string]: { stroke: string; fill: string };
+}[] = [
+ {},
+ {
+ 0: { stroke: Color.BG_CHERRY_500, fill: Color.BG_CHERRY_500 },
+ 1: { stroke: Color.BG_FOREST_500, fill: Color.BG_FOREST_500 },
+ 2: { stroke: Color.BG_SIENNA_400, fill: Color.BG_SIENNA_400 },
+ 3: { stroke: Color.BG_VANILLA_400, fill: Color.BG_VANILLA_400 },
+ 4: { stroke: Color.BG_INK_100, fill: Color.BG_INK_100 },
+ },
+];
+
+export const TIMELINE_OPTIONS = {
+ mode: 1,
+ fill: (seriesIdx: any, _: any, value: any): any =>
+ STATE_VS_COLOR[seriesIdx][value].fill,
+ stroke: (seriesIdx: any, _: any, value: any): any =>
+ STATE_VS_COLOR[seriesIdx][value].stroke,
+ laneWidthOption: 0.3,
+ showGrid: false,
+};
diff --git a/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx b/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
new file mode 100644
index 0000000000..05690a9041
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/GraphWrapper/GraphWrapper.tsx
@@ -0,0 +1,67 @@
+import '../Graph/Graph.styles.scss';
+
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useGetAlertRuleDetailsTimelineGraphData } from 'pages/AlertDetails/hooks';
+import DataStateRenderer from 'periscope/components/DataStateRenderer/DataStateRenderer';
+
+import Graph from '../Graph/Graph';
+
+function GraphWrapper({
+ totalCurrentTriggers,
+}: {
+ totalCurrentTriggers: number;
+}): JSX.Element {
+ const urlQuery = useUrlQuery();
+
+ const relativeTime = urlQuery.get('relativeTime');
+
+ const {
+ isLoading,
+ isRefetching,
+ isError,
+ data,
+ isValidRuleId,
+ ruleId,
+ } = useGetAlertRuleDetailsTimelineGraphData();
+
+ // TODO(shaheer): uncomment when the API is ready for
+ // const { startTime } = useAlertHistoryQueryParams();
+
+ // const [isVerticalGraph, setIsVerticalGraph] = useState(false);
+
+ // useEffect(() => {
+ // const checkVerticalGraph = (): void => {
+ // if (startTime) {
+ // const startTimeDate = dayjs(Number(startTime));
+ // const twentyFourHoursAgo = dayjs().subtract(
+ // HORIZONTAL_GRAPH_HOURS_THRESHOLD,
+ // DAYJS_MANIPULATE_TYPES.HOUR,
+ // );
+
+ // setIsVerticalGraph(startTimeDate.isBefore(twentyFourHoursAgo));
+ // }
+ // };
+
+ // checkVerticalGraph();
+ // }, [startTime]);
+
+ return (
+
+
+ {totalCurrentTriggers} triggers in {relativeTime}
+
+
+
+ {(data): JSX.Element => }
+
+
+
{t('something_went_wrong')}
;
+ }
+
+ return (
+
+
`${row.fingerprint}-${row.value}-${row.unixMilli}`}
+ columns={timelineTableColumns()}
+ dataSource={timelineData}
+ pagination={paginationConfig}
+ size="middle"
+ onChange={onChangeHandler}
+ loading={isLoading || isRefetching}
+ />
+
+ );
+}
+
+export default TimelineTable;
diff --git a/frontend/src/container/AlertHistory/Timeline/Table/types.ts b/frontend/src/container/AlertHistory/Timeline/Table/types.ts
new file mode 100644
index 0000000000..badf649867
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Table/types.ts
@@ -0,0 +1,9 @@
+import {
+ AlertRuleTimelineTableResponse,
+ AlertRuleTimelineTableResponsePayload,
+} from 'types/api/alerts/def';
+
+export type TimelineTableProps = {
+ timelineData: AlertRuleTimelineTableResponse[];
+ totalItems: AlertRuleTimelineTableResponsePayload['data']['total'];
+};
diff --git a/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
new file mode 100644
index 0000000000..1eb43fc417
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Table/useTimelineTable.tsx
@@ -0,0 +1,54 @@
+import { EllipsisOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
+import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
+import AlertState from 'pages/AlertDetails/AlertHeader/AlertState/AlertState';
+import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
+import { formatEpochTimestamp } from 'utils/timeUtils';
+
+export const timelineTableColumns = (): ColumnsType => [
+ {
+ title: 'STATE',
+ dataIndex: 'state',
+ sorter: true,
+ width: 140,
+ render: (value): JSX.Element => (
+
+ ),
+ },
+ {
+ title: 'LABELS',
+ dataIndex: 'labels',
+ render: (labels): JSX.Element => (
+
+ ),
+ },
+ {
+ title: 'CREATED AT',
+ dataIndex: 'unixMilli',
+ width: 200,
+ render: (value): JSX.Element => (
+ {formatEpochTimestamp(value)}
+ ),
+ },
+ {
+ title: 'ACTIONS',
+ width: 140,
+ align: 'right',
+ render: (record): JSX.Element => (
+
+
+
+ ),
+ },
+];
diff --git a/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.styles.scss b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.styles.scss
new file mode 100644
index 0000000000..c153ba65fc
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.styles.scss
@@ -0,0 +1,32 @@
+.timeline-tabs-and-filters {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .reset-button,
+ .top-5-contributors {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+ .coming-soon {
+ display: inline-flex;
+ padding: 4px 8px;
+ border-radius: 20px;
+ border: 1px solid rgba(173, 127, 88, 0.2);
+ background: rgba(173, 127, 88, 0.1);
+ justify-content: center;
+ align-items: center;
+ gap: 5px;
+
+ &__text {
+ color: var(--text-sienna-400);
+ font-size: 10px;
+ font-weight: 500;
+ letter-spacing: -0.05px;
+ line-height: normal;
+ }
+ &__icon {
+ display: flex;
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
new file mode 100644
index 0000000000..515cef1616
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/TabsAndFilters/TabsAndFilters.tsx
@@ -0,0 +1,90 @@
+import './TabsAndFilters.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { TimelineFilter, TimelineTab } from 'container/AlertHistory/types';
+import history from 'lib/history';
+import { Info } from 'lucide-react';
+import Tabs2 from 'periscope/components/Tabs2';
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function ComingSoon(): JSX.Element {
+ return (
+
+ );
+}
+function TimelineTabs(): JSX.Element {
+ const tabs = [
+ {
+ value: TimelineTab.OVERALL_STATUS,
+ label: 'Overall Status',
+ },
+ {
+ value: TimelineTab.TOP_5_CONTRIBUTORS,
+ label: (
+
+ Top 5 Contributors
+
+
+ ),
+ disabled: true,
+ },
+ ];
+
+ return ;
+}
+
+function TimelineFilters(): JSX.Element {
+ const { search } = useLocation();
+ const searchParams = useMemo(() => new URLSearchParams(search), [search]);
+
+ const initialSelectedTab = useMemo(
+ () => searchParams.get('timelineFilter') ?? TimelineFilter.ALL,
+ [searchParams],
+ );
+
+ const handleFilter = (value: TimelineFilter): void => {
+ searchParams.set('timelineFilter', value);
+ history.push({ search: searchParams.toString() });
+ };
+
+ const tabs = [
+ {
+ value: TimelineFilter.ALL,
+ label: 'All',
+ },
+ {
+ value: TimelineFilter.FIRED,
+ label: 'Fired',
+ },
+ {
+ value: TimelineFilter.RESOLVED,
+ label: 'Resolved',
+ },
+ ];
+
+ return (
+
+ );
+}
+
+function TabsAndFilters(): JSX.Element {
+ return (
+
+
+
+
+ );
+}
+
+export default TabsAndFilters;
diff --git a/frontend/src/container/AlertHistory/Timeline/Timeline.styles.scss b/frontend/src/container/AlertHistory/Timeline/Timeline.styles.scss
new file mode 100644
index 0000000000..1d6b4d7990
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Timeline.styles.scss
@@ -0,0 +1,22 @@
+.timeline {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin: 0 16px;
+
+ &__title {
+ color: var(--text-vanilla-100);
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ }
+}
+
+.lightMode {
+ .timeline {
+ &__title {
+ color: var(--text-ink-400);
+ }
+ }
+}
diff --git a/frontend/src/container/AlertHistory/Timeline/Timeline.tsx b/frontend/src/container/AlertHistory/Timeline/Timeline.tsx
new file mode 100644
index 0000000000..18430f7144
--- /dev/null
+++ b/frontend/src/container/AlertHistory/Timeline/Timeline.tsx
@@ -0,0 +1,32 @@
+import './Timeline.styles.scss';
+
+import GraphWrapper from './GraphWrapper/GraphWrapper';
+import TimelineTable from './Table/Table';
+import TabsAndFilters from './TabsAndFilters/TabsAndFilters';
+
+function TimelineTableRenderer(): JSX.Element {
+ return ;
+}
+
+function Timeline({
+ totalCurrentTriggers,
+}: {
+ totalCurrentTriggers: number;
+}): JSX.Element {
+ return (
+
+
Timeline
+
+
+
+
+
+
+
+
+
+
-
-
-
- {isToDisplayLayout && !renderFullScreen && }
- {children}
-
+
+ }>
+
+
+
+ {isToDisplayLayout && !renderFullScreen && }
+ {children}
+
+
-
+
+
+ {showAddCreditCardModal && }
);
}
diff --git a/frontend/src/container/AppLayout/styles.ts b/frontend/src/container/AppLayout/styles.ts
index 5edddcac40..c66d2ee4d8 100644
--- a/frontend/src/container/AppLayout/styles.ts
+++ b/frontend/src/container/AppLayout/styles.ts
@@ -13,7 +13,6 @@ export const Layout = styled(LayoutComponent)`
`;
export const LayoutContent = styled(LayoutComponent.Content)`
- overflow-y: auto;
height: 100%;
&::-webkit-scrollbar {
width: 0.1rem;
diff --git a/frontend/src/container/BillingContainer/BillingContainer.tsx b/frontend/src/container/BillingContainer/BillingContainer.tsx
index 248819723c..e366f068b2 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.tsx
@@ -19,10 +19,10 @@ import { ColumnsType } from 'antd/es/table';
import updateCreditCardApi from 'api/billing/checkout';
import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
import manageCreditCardApi from 'api/billing/manage';
+import logEvent from 'api/common/logEvent';
import Spinner from 'components/Spinner';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import useAnalytics from 'hooks/analytics/useAnalytics';
import useAxiosError from 'hooks/useAxiosError';
import useLicense from 'hooks/useLicense';
import { useNotifications } from 'hooks/useNotifications';
@@ -137,8 +137,6 @@ export default function BillingContainer(): JSX.Element {
Partial
>({});
- const { trackEvent } = useAnalytics();
-
const { isFetching, data: licensesData, error: licenseError } = useLicense();
const { user, org } = useSelector((state) => state.app);
@@ -316,7 +314,7 @@ export default function BillingContainer(): JSX.Element {
const handleBilling = useCallback(async () => {
if (isFreeTrial && !licensesData?.payload?.trialConvertedToSubscription) {
- trackEvent('Billing : Upgrade Plan', {
+ logEvent('Billing : Upgrade Plan', {
user: pick(user, ['email', 'userId', 'name']),
org,
});
@@ -327,7 +325,7 @@ export default function BillingContainer(): JSX.Element {
cancelURL: window.location.href,
});
} else {
- trackEvent('Billing : Manage Billing', {
+ logEvent('Billing : Manage Billing', {
user: pick(user, ['email', 'userId', 'name']),
org,
});
diff --git a/frontend/src/container/CreateAlertChannels/index.tsx b/frontend/src/container/CreateAlertChannels/index.tsx
index d10b6fb225..7345fa4ef9 100644
--- a/frontend/src/container/CreateAlertChannels/index.tsx
+++ b/frontend/src/container/CreateAlertChannels/index.tsx
@@ -11,11 +11,12 @@ import testOpsGenie from 'api/channels/testOpsgenie';
import testPagerApi from 'api/channels/testPager';
import testSlackApi from 'api/channels/testSlack';
import testWebhookApi from 'api/channels/testWebhook';
+import logEvent from 'api/common/logEvent';
import ROUTES from 'constants/routes';
import FormAlertChannels from 'container/FormAlertChannels';
import { useNotifications } from 'hooks/useNotifications';
import history from 'lib/history';
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
@@ -43,6 +44,10 @@ function CreateAlertChannels({
const [formInstance] = Form.useForm();
+ useEffect(() => {
+ logEvent('Alert Channel: Create channel page visited', {});
+ }, []);
+
const [selectedConfig, setSelectedConfig] = useState<
Partial<
SlackChannel &
@@ -139,19 +144,25 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_creation_failed'),
+ });
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_creation_failed'),
});
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [prepareSlackRequest, t, notifications]);
const prepareWebhookRequest = useCallback(() => {
@@ -200,19 +211,25 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_creation_failed'),
+ });
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_creation_failed'),
});
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [prepareWebhookRequest, t, notifications]);
const preparePagerRequest = useCallback(() => {
@@ -245,8 +262,8 @@ function CreateAlertChannels({
setSavingState(true);
const request = preparePagerRequest();
- if (request) {
- try {
+ try {
+ if (request) {
const response = await createPagerApi(request);
if (response.statusCode === 200) {
@@ -255,20 +272,31 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
- } catch (e) {
notifications.error({
message: 'Error',
- description: t('channel_creation_failed'),
+ description: response.error || t('channel_creation_failed'),
});
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
}
+ notifications.error({
+ message: 'Error',
+ description: t('channel_creation_failed'),
+ });
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } catch (error) {
+ notifications.error({
+ message: 'Error',
+ description: t('channel_creation_failed'),
+ });
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [t, notifications, preparePagerRequest]);
const prepareOpsgenieRequest = useCallback(
@@ -295,19 +323,25 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_creation_failed'),
+ });
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_creation_failed'),
});
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [prepareOpsgenieRequest, t, notifications]);
const prepareEmailRequest = useCallback(
@@ -332,19 +366,25 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_creation_failed'),
+ });
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_creation_failed'),
});
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [prepareEmailRequest, t, notifications]);
const prepareMsTeamsRequest = useCallback(
@@ -370,19 +410,25 @@ function CreateAlertChannels({
description: t('channel_creation_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_creation_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_creation_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_creation_failed'),
+ });
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_creation_failed'),
+ };
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_creation_failed'),
});
+ return { status: 'failed', statusMessage: t('channel_creation_failed') };
+ } finally {
+ setSavingState(false);
}
- setSavingState(false);
}, [prepareMsTeamsRequest, t, notifications]);
const onSaveHandler = useCallback(
@@ -400,7 +446,15 @@ function CreateAlertChannels({
const functionToCall = functionMapper[value as keyof typeof functionMapper];
if (functionToCall) {
- functionToCall();
+ const result = await functionToCall();
+ logEvent('Alert Channel: Save channel', {
+ type: value,
+ sendResolvedAlert: selectedConfig?.send_resolved,
+ name: selectedConfig?.name,
+ new: 'true',
+ status: result?.status,
+ statusMessage: result?.statusMessage,
+ });
} else {
notifications.error({
message: 'Error',
@@ -409,6 +463,7 @@ function CreateAlertChannels({
}
}
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[
onSlackHandler,
onWebhookHandler,
@@ -472,14 +527,25 @@ function CreateAlertChannels({
description: t('channel_test_failed'),
});
}
+
+ logEvent('Alert Channel: Test notification', {
+ type: channelType,
+ sendResolvedAlert: selectedConfig?.send_resolved,
+ name: selectedConfig?.name,
+ new: 'true',
+ status:
+ response && response.statusCode === 200 ? 'Test success' : 'Test failed',
+ });
} catch (error) {
notifications.error({
message: 'Error',
description: t('channel_test_unexpected'),
});
}
+
setTestingState(false);
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[
prepareWebhookRequest,
t,
diff --git a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
index cd837b666b..52f4d52215 100644
--- a/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
+++ b/frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
@@ -1,4 +1,6 @@
import { Row, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { AlertTypes } from 'types/api/alerts/alertTypes';
@@ -34,6 +36,13 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
default:
break;
}
+
+ logEvent('Alert: Sample alert link clicked', {
+ dataSource: ALERTS_DATA_SOURCE_MAP[option],
+ link: url,
+ page: 'New alert data source selection page',
+ });
+
window.open(url, '_blank');
}
const renderOptions = useMemo(
diff --git a/frontend/src/container/CreateAlertRule/index.tsx b/frontend/src/container/CreateAlertRule/index.tsx
index e5a4772f30..f7e491cd70 100644
--- a/frontend/src/container/CreateAlertRule/index.tsx
+++ b/frontend/src/container/CreateAlertRule/index.tsx
@@ -1,4 +1,5 @@
import { Form, Row } from 'antd';
+import logEvent from 'api/common/logEvent';
import { ENTITY_VERSION_V4 } from 'constants/app';
import { QueryParams } from 'constants/query';
import FormAlertRules from 'container/FormAlertRules';
@@ -68,6 +69,8 @@ function CreateRules(): JSX.Element {
useEffect(() => {
if (alertType) {
onSelectType(alertType);
+ } else {
+ logEvent('Alert: New alert data source selection page visited', {});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [alertType]);
diff --git a/frontend/src/container/EditAlertChannels/index.tsx b/frontend/src/container/EditAlertChannels/index.tsx
index 3c2e956f14..0fc46beb33 100644
--- a/frontend/src/container/EditAlertChannels/index.tsx
+++ b/frontend/src/container/EditAlertChannels/index.tsx
@@ -11,6 +11,7 @@ import testOpsgenie from 'api/channels/testOpsgenie';
import testPagerApi from 'api/channels/testPager';
import testSlackApi from 'api/channels/testSlack';
import testWebhookApi from 'api/channels/testWebhook';
+import logEvent from 'api/common/logEvent';
import ROUTES from 'constants/routes';
import {
ChannelType,
@@ -89,7 +90,7 @@ function EditAlertChannels({
description: t('webhook_url_required'),
});
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: t('webhook_url_required') };
}
const response = await editSlackApi(prepareSlackRequest());
@@ -101,13 +102,17 @@ function EditAlertChannels({
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_edit_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [prepareSlackRequest, t, notifications, selectedConfig]);
const prepareWebhookRequest = useCallback(() => {
@@ -136,13 +141,13 @@ function EditAlertChannels({
if (selectedConfig?.api_url === '') {
showError(t('webhook_url_required'));
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: t('webhook_url_required') };
}
if (username && (!password || password === '')) {
showError(t('username_no_password'));
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: t('username_no_password') };
}
const response = await editWebhookApi(prepareWebhookRequest());
@@ -154,10 +159,15 @@ function EditAlertChannels({
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- showError(response.error || t('channel_edit_failed'));
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ showError(response.error || t('channel_edit_failed'));
+
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [prepareWebhookRequest, t, notifications, selectedConfig]);
const prepareEmailRequest = useCallback(
@@ -181,13 +191,18 @@ function EditAlertChannels({
description: t('channel_edit_done'),
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_edit_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
+
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [prepareEmailRequest, t, notifications]);
const preparePagerRequest = useCallback(
@@ -218,7 +233,7 @@ function EditAlertChannels({
description: validationError,
});
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: validationError };
}
const response = await editPagerApi(preparePagerRequest());
@@ -229,13 +244,18 @@ function EditAlertChannels({
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_edit_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
+
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [preparePagerRequest, notifications, selectedConfig, t]);
const prepareOpsgenieRequest = useCallback(
@@ -259,7 +279,7 @@ function EditAlertChannels({
description: t('api_key_required'),
});
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: t('api_key_required') };
}
const response = await editOpsgenie(prepareOpsgenieRequest());
@@ -271,13 +291,18 @@ function EditAlertChannels({
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_edit_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
+
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [prepareOpsgenieRequest, t, notifications, selectedConfig]);
const prepareMsTeamsRequest = useCallback(
@@ -301,7 +326,7 @@ function EditAlertChannels({
description: t('webhook_url_required'),
});
setSavingState(false);
- return;
+ return { status: 'failed', statusMessage: t('webhook_url_required') };
}
const response = await editMsTeamsApi(prepareMsTeamsRequest());
@@ -313,31 +338,46 @@ function EditAlertChannels({
});
history.replace(ROUTES.ALL_CHANNELS);
- } else {
- notifications.error({
- message: 'Error',
- description: response.error || t('channel_edit_failed'),
- });
+ return { status: 'success', statusMessage: t('channel_edit_done') };
}
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
+
setSavingState(false);
+ return {
+ status: 'failed',
+ statusMessage: response.error || t('channel_edit_failed'),
+ };
}, [prepareMsTeamsRequest, t, notifications, selectedConfig]);
const onSaveHandler = useCallback(
- (value: ChannelType) => {
+ async (value: ChannelType) => {
+ let result;
if (value === ChannelType.Slack) {
- onSlackEditHandler();
+ result = await onSlackEditHandler();
} else if (value === ChannelType.Webhook) {
- onWebhookEditHandler();
+ result = await onWebhookEditHandler();
} else if (value === ChannelType.Pagerduty) {
- onPagerEditHandler();
+ result = await onPagerEditHandler();
} else if (value === ChannelType.MsTeams) {
- onMsTeamsEditHandler();
+ result = await onMsTeamsEditHandler();
} else if (value === ChannelType.Opsgenie) {
- onOpsgenieEditHandler();
+ result = await onOpsgenieEditHandler();
} else if (value === ChannelType.Email) {
- onEmailEditHandler();
+ result = await onEmailEditHandler();
}
+ logEvent('Alert Channel: Save channel', {
+ type: value,
+ sendResolvedAlert: selectedConfig?.send_resolved,
+ name: selectedConfig?.name,
+ new: 'false',
+ status: result?.status,
+ statusMessage: result?.statusMessage,
+ });
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[
onSlackEditHandler,
onWebhookEditHandler,
@@ -399,6 +439,14 @@ function EditAlertChannels({
description: t('channel_test_failed'),
});
}
+ logEvent('Alert Channel: Test notification', {
+ type: channelType,
+ sendResolvedAlert: selectedConfig?.send_resolved,
+ name: selectedConfig?.name,
+ new: 'false',
+ status:
+ response && response.statusCode === 200 ? 'Test success' : 'Test failed',
+ });
} catch (error) {
notifications.error({
message: 'Error',
@@ -407,6 +455,7 @@ function EditAlertChannels({
}
setTestingState(false);
},
+ // eslint-disable-next-line react-hooks/exhaustive-deps
[
t,
prepareWebhookRequest,
diff --git a/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx b/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx
index af3d768d4b..1b13cb59c8 100644
--- a/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx
+++ b/frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx
@@ -1,8 +1,34 @@
import './EmptyLogsSearch.styles.scss';
import { Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useEffect, useRef } from 'react';
+import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
+
+export default function EmptyLogsSearch({
+ dataSource,
+ panelType,
+}: {
+ dataSource: DataSource;
+ panelType: PanelTypeKeys;
+}): JSX.Element {
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (!logEventCalledRef.current) {
+ if (dataSource === DataSource.TRACES) {
+ logEvent('Traces Explorer: No results', {
+ panelType,
+ });
+ } else if (dataSource === DataSource.LOGS) {
+ logEvent('Logs Explorer: No results', {
+ panelType,
+ });
+ }
+ logEventCalledRef.current = true;
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
-export default function EmptyLogsSearch(): JSX.Element {
return (
diff --git a/frontend/src/container/ErrorDetails/index.tsx b/frontend/src/container/ErrorDetails/index.tsx
index 33a86f9f50..c6b0d5fa22 100644
--- a/frontend/src/container/ErrorDetails/index.tsx
+++ b/frontend/src/container/ErrorDetails/index.tsx
@@ -1,6 +1,7 @@
import './styles.scss';
import { Button, Divider, Space, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
import getNextPrevId from 'api/errors/getNextPrevId';
import Editor from 'components/Editor';
import { ResizeTable } from 'components/ResizeTable';
@@ -9,8 +10,9 @@ import dayjs from 'dayjs';
import { useNotifications } from 'hooks/useNotifications';
import createQueryParams from 'lib/createQueryParams';
import history from 'lib/history';
+import { isUndefined } from 'lodash-es';
import { urlKey } from 'pages/ErrorDetails/utils';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery } from 'react-query';
import { useLocation } from 'react-router-dom';
@@ -111,9 +113,29 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
}));
const onClickTraceHandler = (): void => {
+ logEvent('Exception: Navigate to trace detail page', {
+ groupId: errorDetail?.groupID,
+ spanId: errorDetail.spanID,
+ traceId: errorDetail.traceID,
+ exceptionId: errorDetail?.errorId,
+ });
history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
};
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (!logEventCalledRef.current && !isUndefined(data)) {
+ logEvent('Exception: Detail page visited', {
+ groupId: errorDetail?.groupID,
+ spanId: errorDetail.spanID,
+ traceId: errorDetail.traceID,
+ exceptionId: errorDetail?.errorId,
+ });
+ logEventCalledRef.current = true;
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [data]);
+
return (
<>
{errorDetail.exceptionType}
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
index 2076b858f9..54e87fa458 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
@@ -91,8 +91,7 @@
box-shadow: none !important;
&.ant-btn-round {
- padding-inline-start: 10px;
- padding-inline-end: 8px;
+ padding: 8px 12px 8px 10px;
font-weight: 500;
}
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
index 1aaf22f796..5be22deb2e 100644
--- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
@@ -14,10 +14,12 @@ import {
Tooltip,
Typography,
} from 'antd';
+import logEvent from 'api/common/logEvent';
import axios from 'axios';
import cx from 'classnames';
import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { LOCALSTORAGE } from 'constants/localStorage';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
@@ -32,6 +34,7 @@ import useErrorNotification from 'hooks/useErrorNotification';
import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
import { useNotifications } from 'hooks/useNotifications';
import { mapCompositeQueryFromQuery } from 'lib/newQueryBuilder/queryBuilderMappers/mapCompositeQueryFromQuery';
+import { cloneDeep } from 'lodash-es';
import {
Check,
ConciergeBell,
@@ -46,6 +49,7 @@ import {
Dispatch,
SetStateAction,
useCallback,
+ useEffect,
useMemo,
useRef,
useState,
@@ -55,11 +59,13 @@ import { useHistory } from 'react-router-dom';
import { AppState } from 'store/reducers';
import { Dashboard } from 'types/api/dashboard/getAll';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
+import { DataSource, StringOperators } from 'types/common/queryBuilder';
import AppReducer from 'types/reducer/app';
import { USER_ROLES } from 'types/roles';
+import { PreservedViewsTypes } from './constants';
import ExplorerOptionsHideArea from './ExplorerOptionsHideArea';
+import { PreservedViewsInLocalStorage } from './types';
import {
DATASOURCE_VS_ROUTES,
generateRGBAFromHex,
@@ -88,12 +94,34 @@ function ExplorerOptions({
const history = useHistory();
const ref = useRef
(null);
const isDarkMode = useIsDarkMode();
+ const isLogsExplorer = sourcepage === DataSource.LOGS;
+
+ const PRESERVED_VIEW_LOCAL_STORAGE_KEY = LOCALSTORAGE.LAST_USED_SAVED_VIEWS;
+ const PRESERVED_VIEW_TYPE = isLogsExplorer
+ ? PreservedViewsTypes.LOGS
+ : PreservedViewsTypes.TRACES;
const onModalToggle = useCallback((value: boolean) => {
setIsExport(value);
}, []);
+ const {
+ currentQuery,
+ panelType,
+ isStagedQueryUpdated,
+ redirectWithQueryBuilderData,
+ } = useQueryBuilder();
+
const handleSaveViewModalToggle = (): void => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Save view clicked', {
+ panelType,
+ });
+ } else if (isLogsExplorer) {
+ logEvent('Logs Explorer: Save view clicked', {
+ panelType,
+ });
+ }
setIsSaveModalOpen(!isSaveModalOpen);
};
@@ -103,19 +131,56 @@ function ExplorerOptions({
const { role } = useSelector((state) => state.app);
+ const handleConditionalQueryModification = useCallback((): string => {
+ if (
+ query?.builder?.queryData?.[0]?.aggregateOperator !== StringOperators.NOOP
+ ) {
+ return JSON.stringify(query);
+ }
+
+ // Modify aggregateOperator to count, as noop is not supported in alerts
+ const modifiedQuery = cloneDeep(query);
+
+ modifiedQuery.builder.queryData[0].aggregateOperator = StringOperators.COUNT;
+
+ return JSON.stringify(modifiedQuery);
+ }, [query]);
+
const onCreateAlertsHandler = useCallback(() => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Create alert', {
+ panelType,
+ });
+ } else if (isLogsExplorer) {
+ logEvent('Logs Explorer: Create alert', {
+ panelType,
+ });
+ }
+
+ const stringifiedQuery = handleConditionalQueryModification();
+
history.push(
`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
- JSON.stringify(query),
+ stringifiedQuery,
)}`,
);
- }, [history, query]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [handleConditionalQueryModification, history]);
const onCancel = (value: boolean) => (): void => {
onModalToggle(value);
};
const onAddToDashboard = (): void => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Add to dashboard clicked', {
+ panelType,
+ });
+ } else if (isLogsExplorer) {
+ logEvent('Logs Explorer: Add to dashboard clicked', {
+ panelType,
+ });
+ }
setIsExport(true);
};
@@ -127,13 +192,6 @@ function ExplorerOptions({
refetch: refetchAllView,
} = useGetAllViews(sourcepage);
- const {
- currentQuery,
- panelType,
- isStagedQueryUpdated,
- redirectWithQueryBuilderData,
- } = useQueryBuilder();
-
const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
@@ -217,6 +275,31 @@ function ExplorerOptions({
[viewsData, handleExplorerTabChange],
);
+ const updatePreservedViewInLocalStorage = (option: {
+ key: string;
+ value: string;
+ }): void => {
+ // Retrieve stored views from local storage
+ const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+ // Initialize or parse the stored views
+ const updatedViews: PreservedViewsInLocalStorage = storedViews
+ ? JSON.parse(storedViews)
+ : {};
+
+ // Update the views with the new selection
+ updatedViews[PRESERVED_VIEW_TYPE] = {
+ key: option.key,
+ value: option.value,
+ };
+
+ // Save the updated views back to local storage
+ localStorage.setItem(
+ PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+ JSON.stringify(updatedViews),
+ );
+ };
+
const handleSelect = (
value: string,
option: { key: string; value: string },
@@ -224,12 +307,47 @@ function ExplorerOptions({
onMenuItemSelectHandler({
key: option.key,
});
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Select view', {
+ panelType,
+ viewName: option?.value,
+ });
+ } else if (isLogsExplorer) {
+ logEvent('Logs Explorer: Select view', {
+ panelType,
+ viewName: option?.value,
+ });
+ }
+
+ updatePreservedViewInLocalStorage(option);
+
if (ref.current) {
ref.current.blur();
}
};
+ const removeCurrentViewFromLocalStorage = (): void => {
+ // Retrieve stored views from local storage
+ const storedViews = localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY);
+
+ if (storedViews) {
+ // Parse the stored views
+ const parsedViews = JSON.parse(storedViews);
+
+ // Remove the current view type from the parsed views
+ delete parsedViews[PRESERVED_VIEW_TYPE];
+
+ // Update local storage with the modified views
+ localStorage.setItem(
+ PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+ JSON.stringify(parsedViews),
+ );
+ }
+ };
+
const handleClearSelect = (): void => {
+ removeCurrentViewFromLocalStorage();
+
history.replace(DATASOURCE_VS_ROUTES[sourcepage]);
};
@@ -259,6 +377,17 @@ function ExplorerOptions({
viewName: newViewName,
setNewViewName,
});
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Save view successful', {
+ panelType,
+ viewName: newViewName,
+ });
+ } else if (isLogsExplorer) {
+ logEvent('Logs Explorer: Save view successful', {
+ panelType,
+ viewName: newViewName,
+ });
+ }
};
// TODO: Remove this and move this to scss file
@@ -288,6 +417,44 @@ function ExplorerOptions({
const isEditDeleteSupported = allowedRoles.includes(role as string);
+ const [
+ isRecentlyUsedSavedViewSelected,
+ setIsRecentlyUsedSavedViewSelected,
+ ] = useState(false);
+
+ useEffect(() => {
+ const parsedPreservedView = JSON.parse(
+ localStorage.getItem(PRESERVED_VIEW_LOCAL_STORAGE_KEY) || '{}',
+ );
+
+ const preservedView = parsedPreservedView[PRESERVED_VIEW_TYPE] || {};
+
+ let timeoutId: string | number | NodeJS.Timeout | undefined;
+
+ if (
+ !!preservedView?.key &&
+ viewsData?.data?.data &&
+ !(!!viewName || !!viewKey) &&
+ !isRecentlyUsedSavedViewSelected
+ ) {
+ // prevent the race condition with useShareBuilderUrl
+ timeoutId = setTimeout(() => {
+ onMenuItemSelectHandler({ key: preservedView.key });
+ }, 0);
+ setIsRecentlyUsedSavedViewSelected(false);
+ }
+
+ return (): void => clearTimeout(timeoutId);
+ }, [
+ PRESERVED_VIEW_LOCAL_STORAGE_KEY,
+ PRESERVED_VIEW_TYPE,
+ isRecentlyUsedSavedViewSelected,
+ onMenuItemSelectHandler,
+ viewKey,
+ viewName,
+ viewsData?.data?.data,
+ ]);
+
return (
{isQueryUpdated && !isExplorerOptionHidden && (
@@ -406,12 +573,12 @@ function ExplorerOptions({
- {sourcepage === DataSource.LOGS
+ {isLogsExplorer
? 'Learn more about Logs explorer '
: 'Learn more about Traces explorer '}
}
+ data-testid="hide-toolbar"
/>