| + {{ else }} + | + {{ end }} + {{ .Alerts | len }} alert{{ if gt (len .Alerts) 1 }}s{{ end }} for {{ range .GroupLabels.SortedPairs }} + {{ .Name }}={{ .Value }} + {{ end }} + | +||||
+
|
+
@@ -105,26 +80,32 @@ function CustomTimePickerPopoverContent({
}}
className={cx(
'date-time-options-btn',
- selectedTime === option.value && 'active',
+ customDateTimeVisible
+ ? option.value === 'custom' && 'active'
+ : selectedTime === option.value && 'active',
)}
>
{option.label}
))}
-
+
{selectedTime === 'custom' || customDateTimeVisible ? (
-
+
diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss b/frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss
new file mode 100644
index 0000000000..58ebe060d4
--- /dev/null
+++ b/frontend/src/components/CustomTimePicker/RangePickerModal.styles.scss
@@ -0,0 +1,4 @@
+.custom-date-picker {
+ display: flex;
+ flex-direction: column;
+}
diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
new file mode 100644
index 0000000000..24ba0e2b01
--- /dev/null
+++ b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
@@ -0,0 +1,68 @@
+import './RangePickerModal.styles.scss';
+
+import { DatePicker } from 'antd';
+import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
+import { LexicalContext } from 'container/TopNav/DateTimeSelectionV2/config';
+import dayjs, { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+interface RangePickerModalProps {
+ setCustomDTPickerVisible: Dispatch>;
+ setIsOpen: Dispatch>;
+ onCustomDateHandler: (
+ dateTimeRange: DateTimeRangeType,
+ lexicalContext?: LexicalContext | undefined,
+ ) => void;
+ selectedTime: string;
+}
+
+function RangePickerModal(props: RangePickerModalProps): JSX.Element {
+ const {
+ setCustomDTPickerVisible,
+ setIsOpen,
+ onCustomDateHandler,
+ selectedTime,
+ } = props;
+ const { RangePicker } = DatePicker;
+ const { maxTime, minTime } = useSelector(
+ (state) => state.globalTime,
+ );
+
+ const disabledDate = (current: Dayjs): boolean => {
+ const currentDay = dayjs(current);
+ return currentDay.isAfter(dayjs());
+ };
+
+ const onPopoverClose = (visible: boolean): void => {
+ if (!visible) {
+ setCustomDTPickerVisible(false);
+ }
+ setIsOpen(visible);
+ };
+
+ const onModalOkHandler = (date_time: any): void => {
+ if (date_time?.[1]) {
+ onPopoverClose(false);
+ }
+ onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
+ };
+ return (
+ &
Pick;
-function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
+function LogGeneralField({
+ fieldKey,
+ fieldValue,
+ linesPerRow = 1,
+}: LogFieldProps): JSX.Element {
const html = useMemo(
() => ({
__html: convert.toHtml(dompurify.sanitize(fieldValue)),
@@ -55,7 +60,11 @@ function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
{`${fieldKey} : `}
- 1 ? linesPerRow : undefined}
+ />
);
}
@@ -92,6 +101,7 @@ type ListLogViewProps = {
onSetActiveLog: (log: ILog) => void;
onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
activeLog?: ILog | null;
+ linesPerRow: number;
};
function ListLogView({
@@ -100,6 +110,7 @@ function ListLogView({
onSetActiveLog,
onAddToQuery,
activeLog,
+ linesPerRow,
}: ListLogViewProps): JSX.Element {
const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
@@ -114,6 +125,8 @@ function ListLogView({
onClearActiveLog: handleClearActiveContextLog,
} = useActiveLog();
+ const isDarkMode = useIsDarkMode();
+
const handlerClearActiveContextLog = useCallback(
(event: React.MouseEvent | React.KeyboardEvent) => {
event.preventDefault();
@@ -149,7 +162,7 @@ function ListLogView({
[flattenLogData.timestamp],
);
- const logType = logData?.attributes_string?.log_level || LogType.INFO;
+ const logType = getLogIndicatorType(logData);
const handleMouseEnter = (): void => {
setHasActionButtons(true);
@@ -163,6 +176,7 @@ function ListLogView({
<>
- `
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
- white-space: nowrap;
+ ${({ linesPerRow }): string =>
+ linesPerRow
+ ? `-webkit-line-clamp: ${linesPerRow};
+ line-clamp: ${linesPerRow};
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ white-space: normal; `
+ : 'white-space: nowrap;'};
+ };
`;
export const SelectedLog = styled.div`
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
index 6d2429b592..a00c7f6761 100644
--- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
@@ -10,15 +10,27 @@
background-color: transparent;
&.INFO {
- background-color: #1d212d;
+ background-color: var(--bg-slate-400);
}
- &.WARNING {
- background-color: #ffcd56;
+ &.WARNING, &.WARN {
+ background-color: var(--bg-amber-500);
}
&.ERROR {
- background-color: #e5484d;
+ background-color: var(--bg-cherry-500);
+ }
+
+ &.TRACE {
+ background-color: var(--bg-robin-300);
+ }
+
+ &.DEBUG {
+ background-color: var(--bg-forest-500);
+ }
+
+ &.FATAL {
+ background-color: var(--bg-sakura-500);
}
}
diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
new file mode 100644
index 0000000000..d924c27426
--- /dev/null
+++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+
+import LogStateIndicator from './LogStateIndicator';
+
+describe('LogStateIndicator', () => {
+ it('renders correctly with default props', () => {
+ const { container } = render(,
+): string => {
+ if (log.severity_text) {
+ return getSeverityType(log.severity_text as string);
+ }
+ return (log.log_level as string) || LogType.INFO;
+};
diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx
index 94c9dbe1bb..099e0fcc25 100644
--- a/frontend/src/components/Logs/RawLogView/index.tsx
+++ b/frontend/src/components/Logs/RawLogView/index.tsx
@@ -23,9 +23,8 @@ import {
} from 'react';
import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
-import LogStateIndicator, {
- LogType,
-} from '../LogStateIndicator/LogStateIndicator';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import { getLogIndicatorType } from '../LogStateIndicator/utils';
// styles
import { RawLogContent, RawLogViewContainer } from './styles';
import { RawLogViewProps } from './types';
@@ -64,7 +63,7 @@ function RawLogView({
const severityText = data.severity_text ? `${data.severity_text} |` : '';
- const logType = data?.attributes_string?.log_level || LogType.INFO;
+ const logType = getLogIndicatorType(data);
const updatedSelecedFields = useMemo(
() => selectedFields.filter((e) => e.name !== 'id'),
@@ -164,7 +163,11 @@ function RawLogView({
>
+ $isHightlightedLog
+ ? `background-color: ${
+ $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
+ };
+ transition: background-color 2s ease-in;`
+ : ''}
`;
export const ExpandIconWrapper = styled(Col)`
diff --git a/frontend/src/components/Logs/TableView/config.ts b/frontend/src/components/Logs/TableView/config.ts
index 73b5f9a4c3..7a267dc624 100644
--- a/frontend/src/components/Logs/TableView/config.ts
+++ b/frontend/src/components/Logs/TableView/config.ts
@@ -14,12 +14,12 @@ export function getDefaultCellStyle(isDarkMode?: boolean): CSSProperties {
lineHeight: '18px',
letterSpacing: '-0.07px',
marginBottom: '0px',
+ minWidth: '10rem',
};
}
export const defaultTableStyle: CSSProperties = {
minWidth: '40rem',
- maxWidth: '40rem',
};
export const defaultListViewPanelStyle: CSSProperties = {
diff --git a/frontend/src/components/Logs/TableView/types.ts b/frontend/src/components/Logs/TableView/types.ts
index 3176101d9d..36a796ac0f 100644
--- a/frontend/src/components/Logs/TableView/types.ts
+++ b/frontend/src/components/Logs/TableView/types.ts
@@ -23,6 +23,7 @@ export type UseTableViewProps = {
onOpenLogsContext?: (log: ILog) => void;
onClickExpand?: (log: ILog) => void;
activeLog?: ILog | null;
+ activeLogIndex?: number;
activeContextLog?: ILog | null;
isListViewPanel?: boolean;
} & LogsTableViewProps;
diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
index 9db2332635..259e046370 100644
--- a/frontend/src/components/Logs/TableView/useTableView.tsx
+++ b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -7,12 +7,10 @@ import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useIsDarkMode } from 'hooks/useDarkMode';
import { FlatLogData } from 'lib/logs/flatLogData';
-import { defaultTo } from 'lodash-es';
import { useMemo } from 'react';
-import LogStateIndicator, {
- LogType,
-} from '../LogStateIndicator/LogStateIndicator';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import { getLogIndicatorTypeForTable } from '../LogStateIndicator/utils';
import {
defaultListViewPanelStyle,
defaultTableStyle,
@@ -84,7 +82,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
children: (
{
if (
maxLinesPerRow &&
@@ -122,38 +120,36 @@ export default function LogsFormatOptionsMenu({
{selectedItem && (
<>
- {selectedItem === 'raw' && (
- <>
-
-
RELATIVE TIMES
{getTimeChips(RelativeDurationSuggestionOptions)}
+
+ );
+}
+
+export default RangePickerModal;
diff --git a/frontend/src/components/LogDetail/LogDetails.styles.scss b/frontend/src/components/LogDetail/LogDetails.styles.scss
index 0dcdc1e5c1..c8ac0be91f 100644
--- a/frontend/src/components/LogDetail/LogDetails.styles.scss
+++ b/frontend/src/components/LogDetail/LogDetails.styles.scss
@@ -18,6 +18,8 @@
}
.ant-drawer-body {
+ display: flex;
+ flex-direction: column;
padding: 16px;
}
diff --git a/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss b/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
index e3da355621..2a6822dc00 100644
--- a/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
+++ b/frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss
@@ -1,10 +1,13 @@
.query-builder-search-wrapper {
- margin-top: 10px;
- height: 46px;
- border: 1px solid var(--bg-slate-400);
- border-bottom: none;
+ margin-top: 10px;
+ border: 1px solid var(--bg-slate-400);
+ border-bottom: none;
- .ant-select-selector {
- border: none !important;
- }
-}
\ No newline at end of file
+ .ant-select-selector {
+ border: none !important;
+
+ input {
+ font-size: 12px;
+ }
+ }
+}
diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx
index 74deef6cdf..2b828d663c 100644
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -9,6 +9,7 @@ import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useActiveLog } from 'hooks/logs/useActiveLog';
import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import { useIsDarkMode } from 'hooks/useDarkMode';
// utils
import { FlatLogData } from 'lib/logs/flatLogData';
import { useCallback, useMemo, useState } from 'react';
@@ -19,9 +20,8 @@ import { ILog } from 'types/api/logs/log';
// components
import AddToQueryHOC, { AddToQueryHOCProps } from '../AddToQueryHOC';
import LogLinesActionButtons from '../LogLinesActionButtons/LogLinesActionButtons';
-import LogStateIndicator, {
- LogType,
-} from '../LogStateIndicator/LogStateIndicator';
+import LogStateIndicator from '../LogStateIndicator/LogStateIndicator';
+import { getLogIndicatorType } from '../LogStateIndicator/utils';
// styles
import {
Container,
@@ -37,12 +37,17 @@ const convert = new Convert();
interface LogFieldProps {
fieldKey: string;
fieldValue: string;
+ linesPerRow?: number;
}
-type LogSelectedFieldProps = LogFieldProps &
+type LogSelectedFieldProps = Omit
-
max lines per row
-
-
-
+ <>
+
+
+
+
max lines per row
+
+
+
-
- )}
+
{!addNewColumn && }
@@ -221,8 +217,6 @@ export default function LogsFormatOptionsMenu({
className="column-name"
key={value}
onClick={(eve): void => {
- console.log('coluimn name', label, value);
-
eve.stopPropagation();
if (addColumn && addColumn?.onSelect) {
diff --git a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
index cd6a5fdc33..20be0677bd 100644
--- a/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
+++ b/frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx
@@ -1,10 +1,12 @@
/* eslint-disable no-restricted-syntax */
/* eslint-disable react/jsx-props-no-spreading */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
import ReactMarkdown from 'react-markdown';
import { CodeProps } from 'react-markdown/lib/ast-to-react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { a11yDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import rehypeRaw from 'rehype-raw';
import CodeCopyBtn from './CodeCopyBtn/CodeCopyBtn';
@@ -74,6 +76,10 @@ const interpolateMarkdown = (
return interpolatedContent;
};
+function CustomTag({ color }: { color: string }): JSX.Element {
+ return
{interpolatedMarkdown}
diff --git a/frontend/src/constants/app.ts b/frontend/src/constants/app.ts
index 8529db4e4d..d260806856 100644
--- a/frontend/src/constants/app.ts
+++ b/frontend/src/constants/app.ts
@@ -13,3 +13,6 @@ export const SIGNOZ_UPGRADE_PLAN_URL =
'https://upgrade.signoz.io/upgrade-from-app';
export const DASHBOARD_TIME_IN_DURATION = 'refreshInterval';
+
+export const DEFAULT_ENTITY_VERSION = 'v3';
+export const ENTITY_VERSION_V4 = 'v4';
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index 296735b286..85f46ab892 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -16,4 +16,6 @@ export enum LOCALSTORAGE {
CHAT_SUPPORT = 'CHAT_SUPPORT',
IS_IDENTIFIED_USER = 'IS_IDENTIFIED_USER',
DASHBOARD_VARIABLES = 'DASHBOARD_VARIABLES',
+ SHOW_EXPLORER_TOOLBAR = 'SHOW_EXPLORER_TOOLBAR',
+ PINNED_ATTRIBUTES = 'PINNED_ATTRIBUTES',
}
diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index d3bd2729d1..31ec5fcd20 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -27,5 +27,6 @@ export enum QueryParams {
viewName = 'viewName',
viewKey = 'viewKey',
expandedWidgetId = 'expandedWidgetId',
+ integration = 'integration',
pagination = 'pagination',
}
diff --git a/frontend/src/constants/queryBuilder.ts b/frontend/src/constants/queryBuilder.ts
index 936bfccdde..0999b634ba 100644
--- a/frontend/src/constants/queryBuilder.ts
+++ b/frontend/src/constants/queryBuilder.ts
@@ -36,6 +36,11 @@ import { v4 as uuid } from 'uuid';
import {
logsAggregateOperatorOptions,
metricAggregateOperatorOptions,
+ metricsGaugeAggregateOperatorOptions,
+ metricsGaugeSpaceAggregateOperatorOptions,
+ metricsHistogramSpaceAggregateOperatorOptions,
+ metricsSumAggregateOperatorOptions,
+ metricsSumSpaceAggregateOperatorOptions,
tracesAggregateOperatorOptions,
} from './queryBuilderOperators';
@@ -74,6 +79,18 @@ export const mapOfOperators = {
traces: tracesAggregateOperatorOptions,
};
+export const metricsOperatorsByType = {
+ Sum: metricsSumAggregateOperatorOptions,
+ Gauge: metricsGaugeAggregateOperatorOptions,
+};
+
+export const metricsSpaceAggregationOperatorsByType = {
+ Sum: metricsSumSpaceAggregateOperatorOptions,
+ Gauge: metricsGaugeSpaceAggregateOperatorOptions,
+ Histogram: metricsHistogramSpaceAggregateOperatorOptions,
+ ExponentialHistogram: metricsHistogramSpaceAggregateOperatorOptions,
+};
+
export const mapOfQueryFilters: Record = {
metrics: [
// eslint-disable-next-line sonarjs/no-duplicate-string
@@ -148,6 +165,9 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
queryName: createNewBuilderItemName({ existNames: [], sourceNames: alphabet }),
aggregateOperator: MetricAggregateOperator.COUNT,
aggregateAttribute: initialAutocompleteData,
+ timeAggregation: MetricAggregateOperator.RATE,
+ spaceAggregation: MetricAggregateOperator.SUM,
+ functions: [],
filters: { items: [], op: 'AND' },
expression: createNewBuilderItemName({
existNames: [],
@@ -160,7 +180,7 @@ export const initialQueryBuilderFormValues: IBuilderQuery = {
orderBy: [],
groupBy: [],
legend: '',
- reduceTo: 'sum',
+ reduceTo: 'avg',
};
const initialQueryBuilderFormLogsValues: IBuilderQuery = {
@@ -268,6 +288,14 @@ export enum PANEL_TYPES {
EMPTY_WIDGET = 'EMPTY_WIDGET',
}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export enum ATTRIBUTE_TYPES {
+ SUM = 'Sum',
+ GAUGE = 'Gauge',
+ HISTOGRAM = 'Histogram',
+ EXPONENTIAL_HISTOGRAM = 'ExponentialHistogram',
+}
+
export type IQueryBuilderState = 'search';
export const QUERY_BUILDER_SEARCH_VALUES = {
diff --git a/frontend/src/constants/queryBuilderOperators.ts b/frontend/src/constants/queryBuilderOperators.ts
index 7c5cff2b69..581d517875 100644
--- a/frontend/src/constants/queryBuilderOperators.ts
+++ b/frontend/src/constants/queryBuilderOperators.ts
@@ -302,3 +302,126 @@ export const logsAggregateOperatorOptions: SelectOption[] = [
label: 'Rate_max',
},
];
+
+export const metricsSumAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [
+ {
+ value: MetricAggregateOperator.RATE,
+ label: 'Rate',
+ },
+ {
+ value: MetricAggregateOperator.INCREASE,
+ label: 'Increase',
+ },
+];
+
+export const metricsGaugeAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [
+ {
+ value: MetricAggregateOperator.LATEST,
+ label: 'Latest',
+ },
+ {
+ value: MetricAggregateOperator.SUM,
+ label: 'Sum',
+ },
+ {
+ value: MetricAggregateOperator.AVG,
+ label: 'Avg',
+ },
+ {
+ value: MetricAggregateOperator.MIN,
+ label: 'Min',
+ },
+ {
+ value: MetricAggregateOperator.MAX,
+ label: 'Max',
+ },
+ {
+ value: MetricAggregateOperator.COUNT,
+ label: 'Count',
+ },
+ {
+ value: MetricAggregateOperator.COUNT_DISTINCT,
+ label: 'Count Distinct',
+ },
+];
+
+export const metricsSumSpaceAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [
+ {
+ value: MetricAggregateOperator.SUM,
+ label: 'Sum',
+ },
+ {
+ value: MetricAggregateOperator.AVG,
+ label: 'Avg',
+ },
+ {
+ value: MetricAggregateOperator.MIN,
+ label: 'Min',
+ },
+ {
+ value: MetricAggregateOperator.MAX,
+ label: 'Max',
+ },
+];
+
+export const metricsGaugeSpaceAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [
+ {
+ value: MetricAggregateOperator.SUM,
+ label: 'Sum',
+ },
+ {
+ value: MetricAggregateOperator.AVG,
+ label: 'Avg',
+ },
+ {
+ value: MetricAggregateOperator.MIN,
+ label: 'Min',
+ },
+ {
+ value: MetricAggregateOperator.MAX,
+ label: 'Max',
+ },
+];
+
+export const metricsHistogramSpaceAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [
+ {
+ value: MetricAggregateOperator.P50,
+ label: 'P50',
+ },
+ {
+ value: MetricAggregateOperator.P75,
+ label: 'P75',
+ },
+ {
+ value: MetricAggregateOperator.P90,
+ label: 'P90',
+ },
+ {
+ value: MetricAggregateOperator.P95,
+ label: 'P95',
+ },
+ {
+ value: MetricAggregateOperator.P99,
+ label: 'P99',
+ },
+];
+
+export const metricsEmptyTimeAggregateOperatorOptions: SelectOption<
+ string,
+ string
+>[] = [];
diff --git a/frontend/src/constants/queryFunctionOptions.ts b/frontend/src/constants/queryFunctionOptions.ts
new file mode 100644
index 0000000000..b79f673c46
--- /dev/null
+++ b/frontend/src/constants/queryFunctionOptions.ts
@@ -0,0 +1,137 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { QueryFunctionsTypes } from 'types/common/queryBuilder';
+import { SelectOption } from 'types/common/select';
+
+export const queryFunctionOptions: SelectOption[] = [
+ {
+ value: QueryFunctionsTypes.CUTOFF_MIN,
+ label: 'Cut Off Min',
+ },
+ {
+ value: QueryFunctionsTypes.CUTOFF_MAX,
+ label: 'Cut Off Max',
+ },
+ {
+ value: QueryFunctionsTypes.CLAMP_MIN,
+ label: 'Clamp Min',
+ },
+ {
+ value: QueryFunctionsTypes.CLAMP_MAX,
+ label: 'Clamp Max',
+ },
+ {
+ value: QueryFunctionsTypes.ABSOLUTE,
+ label: 'Absolute',
+ },
+ {
+ value: QueryFunctionsTypes.LOG_2,
+ label: 'Log2',
+ },
+ {
+ value: QueryFunctionsTypes.LOG_10,
+ label: 'Log10',
+ },
+ {
+ value: QueryFunctionsTypes.CUMULATIVE_SUM,
+ label: 'Cumulative Sum',
+ },
+ {
+ value: QueryFunctionsTypes.EWMA_3,
+ label: 'EWMA 3',
+ },
+ {
+ value: QueryFunctionsTypes.EWMA_5,
+ label: 'EWMA 5',
+ },
+ {
+ value: QueryFunctionsTypes.EWMA_7,
+ label: 'EWMA 7',
+ },
+ {
+ value: QueryFunctionsTypes.MEDIAN_3,
+ label: 'Median 3',
+ },
+ {
+ value: QueryFunctionsTypes.MEDIAN_5,
+ label: 'Median 5',
+ },
+ {
+ value: QueryFunctionsTypes.MEDIAN_7,
+ label: 'Median 7',
+ },
+ {
+ value: QueryFunctionsTypes.TIME_SHIFT,
+ label: 'Time Shift',
+ },
+];
+
+interface QueryFunctionConfigType {
+ [key: string]: {
+ showInput: boolean;
+ inputType?: string;
+ placeholder?: string;
+ };
+}
+
+export const queryFunctionsTypesConfig: QueryFunctionConfigType = {
+ cutOffMin: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Threshold',
+ },
+ cutOffMax: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Threshold',
+ },
+ clampMin: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Threshold',
+ },
+ clampMax: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Threshold',
+ },
+ absolute: {
+ showInput: false,
+ },
+ log2: {
+ showInput: false,
+ },
+ log10: {
+ showInput: false,
+ },
+ cumSum: {
+ showInput: false,
+ },
+ ewma3: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Alpha',
+ },
+ ewma5: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Alpha',
+ },
+ ewma7: {
+ showInput: true,
+ inputType: 'text',
+ placeholder: 'Alpha',
+ },
+ median3: {
+ showInput: false,
+ },
+ median5: {
+ showInput: false,
+ },
+ median7: {
+ showInput: false,
+ },
+ timeShift: {
+ showInput: true,
+ inputType: 'text',
+ },
+};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 2f7c650912..0b087ff8cd 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -7,6 +7,11 @@ const ROUTES = {
TRACE_DETAIL: '/trace/:id',
TRACES_EXPLORER: '/traces-explorer',
GET_STARTED: '/get-started',
+ GET_STARTED_APPLICATION_MONITORING: '/get-started/application-monitoring',
+ GET_STARTED_LOGS_MANAGEMENT: '/get-started/logs-management',
+ GET_STARTED_INFRASTRUCTURE_MONITORING:
+ '/get-started/infrastructure-monitoring',
+ GET_STARTED_AWS_MONITORING: '/get-started/aws-monitoring',
USAGE_EXPLORER: '/usage-explorer',
APPLICATION: '/services',
ALL_DASHBOARD: '/dashboard',
@@ -42,10 +47,13 @@ const ROUTES = {
TRACE_EXPLORER: '/trace-explorer',
BILLING: '/billing',
SUPPORT: '/support',
- LOGS_SAVE_VIEWS: '/logs-save-views',
- TRACES_SAVE_VIEWS: '/traces-save-views',
+ LOGS_SAVE_VIEWS: '/logs/saved-views',
+ TRACES_SAVE_VIEWS: '/traces/saved-views',
WORKSPACE_LOCKED: '/workspace-locked',
SHORTCUTS: '/shortcuts',
+ INTEGRATIONS_BASE: '/integrations',
+ INTEGRATIONS_INSTALLED: '/integrations/installed',
+ INTEGRATIONS_MARKETPLACE: '/integrations/marketplace',
} as const;
export default ROUTES;
diff --git a/frontend/src/constants/shortcuts/DashboardShortcuts.ts b/frontend/src/constants/shortcuts/DashboardShortcuts.ts
new file mode 100644
index 0000000000..ee861708f7
--- /dev/null
+++ b/frontend/src/constants/shortcuts/DashboardShortcuts.ts
@@ -0,0 +1,17 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
+
+export const DashboardShortcuts = {
+ SaveChanges: 's+meta',
+ DiscardChanges: 'd+meta',
+};
+
+export const DashboardShortcutsName = {
+ SaveChanges: `${userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'}+s`,
+};
+
+export const DashboardShortcutsDescription = {
+ SaveChanges: 'Save Changes',
+ DiscardChanges: 'Discard Changes',
+};
diff --git a/frontend/src/constants/shortcuts/QBShortcuts.ts b/frontend/src/constants/shortcuts/QBShortcuts.ts
new file mode 100644
index 0000000000..56fea081df
--- /dev/null
+++ b/frontend/src/constants/shortcuts/QBShortcuts.ts
@@ -0,0 +1,17 @@
+import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
+
+const userOS = getUserOperatingSystem();
+
+export const QBShortcuts = {
+ StageAndRunQuery: 'enter+meta',
+};
+
+export const QBShortcutsName = {
+ StageAndRunQuery: `${
+ userOS === UserOperatingSystem.MACOS ? 'cmd' : 'ctrl'
+ }+enter`,
+};
+
+export const QBShortcutsDescription = {
+ StageAndRunQuery: 'Stage and Run the query',
+};
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index d44a2d26b8..5d18e7d307 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -231,7 +231,12 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
const routeKey = useMemo(() => getRouteKey(pathname), [pathname]);
const pageTitle = t(routeKey);
const renderFullScreen =
- pathname === ROUTES.GET_STARTED || pathname === ROUTES.WORKSPACE_LOCKED;
+ pathname === ROUTES.GET_STARTED ||
+ pathname === ROUTES.WORKSPACE_LOCKED ||
+ pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING ||
+ pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING ||
+ pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT ||
+ pathname === ROUTES.GET_STARTED_AWS_MONITORING;
const [showTrialExpiryBanner, setShowTrialExpiryBanner] = useState(false);
diff --git a/frontend/src/container/BillingContainer/BillingContainer.styles.scss b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
index afb9e80253..05a672b18c 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.styles.scss
+++ b/frontend/src/container/BillingContainer/BillingContainer.styles.scss
@@ -1,13 +1,29 @@
.billing-container {
- padding: 16px 0;
- width: 100%;
+ padding-top: 36px;
+ width: 65%;
.billing-summary {
margin: 24px 8px;
}
.billing-details {
- margin: 36px 8px;
+ margin: 24px 0px;
+
+ .ant-table-title {
+ color: var(--bg-vanilla-400);
+ background-color: rgb(27, 28, 32);
+ }
+
+ .ant-table-cell {
+ background-color: var(--bg-ink-400);
+ border-color: var(--bg-slate-500);
+ }
+
+ .ant-table-tbody {
+ td {
+ border-color: var(--bg-slate-500);
+ }
+ }
}
.upgrade-plan-benefits {
@@ -24,6 +40,15 @@
}
}
}
+
+ .empty-graph-card {
+ .ant-card-body {
+ height: 40vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ }
}
.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
@@ -34,3 +59,20 @@
.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
min-width: 100% !important;
}
+
+.lightMode {
+ .billing-container {
+ .billing-details {
+ .ant-table-cell {
+ background: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-200);
+ }
+
+ .ant-table-tbody {
+ td {
+ border-color: var(--bg-vanilla-200);
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/BillingContainer/BillingContainer.test.tsx b/frontend/src/container/BillingContainer/BillingContainer.test.tsx
index b4eadd433b..1988df313b 100644
--- a/frontend/src/container/BillingContainer/BillingContainer.test.tsx
+++ b/frontend/src/container/BillingContainer/BillingContainer.test.tsx
@@ -12,13 +12,36 @@ import BillingContainer from './BillingContainer';
const lisenceUrl = 'http://localhost/api/v2/licenses';
+jest.mock('uplot', () => {
+ const paths = {
+ spline: jest.fn(),
+ bars: jest.fn(),
+ };
+
+ const uplotMock = jest.fn(() => ({
+ paths,
+ }));
+
+ return {
+ paths,
+ default: uplotMock,
+ };
+});
+
+window.ResizeObserver =
+ window.ResizeObserver ||
+ jest.fn().mockImplementation(() => ({
+ disconnect: jest.fn(),
+ observe: jest.fn(),
+ unobserve: jest.fn(),
+ }));
+
describe('BillingContainer', () => {
test('Component should render', async () => {
act(() => {
render( = [
},
];
+// eslint-disable-next-line sonarjs/cognitive-complexity
export default function BillingContainer(): JSX.Element {
- const daysRemainingStr = 'days remaining in your billing period.';
+ const { t } = useTranslation(['billings']);
+ const daysRemainingStr = t('days_remaining');
const [headerText, setHeaderText] = useState('');
const [billAmount, setBillAmount] = useState(0);
- const [totalBillAmount, setTotalBillAmount] = useState(0);
const [activeLicense, setActiveLicense] = useState(null);
const [daysRemaining, setDaysRemaining] = useState(0);
const [isFreeTrial, setIsFreeTrial] = useState(false);
const [data, setData] = useState([]);
- const billCurrency = '$';
+ const [apiResponse, setApiResponse] = useState<
+ Partial
+ >({});
const { trackEvent } = useAnalytics();
@@ -120,10 +145,15 @@ export default function BillingContainer(): JSX.Element {
const handleError = useAxiosError();
+ const isCloudUserVal = isCloudUser();
+
const processUsageData = useCallback(
(data: any): void => {
+ if (isEmpty(data?.payload)) {
+ return;
+ }
const {
- details: { breakdown = [], total, billTotal },
+ details: { breakdown = [], billTotal },
billingPeriodStart,
billingPeriodEnd,
} = data?.payload || {};
@@ -141,8 +171,7 @@ export default function BillingContainer(): JSX.Element {
formattedUsageData.push({
key: `${index}${i}`,
name: i === 0 ? element?.type : '',
- unit: element?.unit,
- dataIngested: tier.quantity,
+ dataIngested: `${tier.quantity} ${element?.unit}`,
pricePerUnit: tier.unitPrice,
cost: `$ ${tier.tierCost}`,
});
@@ -152,7 +181,6 @@ export default function BillingContainer(): JSX.Element {
}
setData(formattedUsageData);
- setTotalBillAmount(total);
if (!licensesData?.payload?.onTrial) {
const remainingDays = getRemainingDays(billingPeriodEnd) - 1;
@@ -165,11 +193,16 @@ export default function BillingContainer(): JSX.Element {
setDaysRemaining(remainingDays > 0 ? remainingDays : 0);
setBillAmount(billTotal);
}
+
+ setApiResponse(data?.payload || {});
},
[licensesData?.payload?.onTrial],
);
- const { isLoading } = useQuery(
+ const isSubscriptionPastDue =
+ apiResponse.subscriptionStatus === SubscriptionStatus.PastDue;
+
+ const { isLoading, isFetching: isFetchingBillingData } = useQuery(
[REACT_QUERY_KEY.GET_BILLING_USAGE, user?.userId],
{
queryFn: () => getUsage(activeLicense?.key || ''),
@@ -208,11 +241,6 @@ export default function BillingContainer(): JSX.Element {
key: 'name',
render: (text): JSX.Element =>
-
-
- Total
-
-
-
-
-
-
-
- ${totalBillAmount}
-
-
-
- );
-
const renderTableSkeleton = (): JSX.Element => (
+ !isLoading && !isFetchingBillingData ? (
+ [];
+ isLoading?: boolean;
+ fileName: string;
+};
diff --git a/frontend/src/container/EditAlertChannels/index.tsx b/frontend/src/container/EditAlertChannels/index.tsx
index 58401bb48e..29d7816d90 100644
--- a/frontend/src/container/EditAlertChannels/index.tsx
+++ b/frontend/src/container/EditAlertChannels/index.tsx
@@ -1,9 +1,11 @@
import { Form } from 'antd';
+import editEmail from 'api/channels/editEmail';
import editMsTeamsApi from 'api/channels/editMsTeams';
import editOpsgenie from 'api/channels/editOpsgenie';
import editPagerApi from 'api/channels/editPager';
import editSlackApi from 'api/channels/editSlack';
import editWebhookApi from 'api/channels/editWebhook';
+import testEmail from 'api/channels/testEmail';
import testMsTeamsApi from 'api/channels/testMsTeams';
import testOpsgenie from 'api/channels/testOpsgenie';
import testPagerApi from 'api/channels/testPager';
@@ -12,6 +14,7 @@ import testWebhookApi from 'api/channels/testWebhook';
import ROUTES from 'constants/routes';
import {
ChannelType,
+ EmailChannel,
MsTeamsChannel,
OpsgenieChannel,
PagerChannel,
@@ -39,7 +42,8 @@ function EditAlertChannels({
WebhookChannel &
PagerChannel &
MsTeamsChannel &
- OpsgenieChannel
+ OpsgenieChannel &
+ EmailChannel
>
>({
...initialValue,
@@ -156,6 +160,36 @@ function EditAlertChannels({
setSavingState(false);
}, [prepareWebhookRequest, t, notifications, selectedConfig]);
+ const prepareEmailRequest = useCallback(
+ () => ({
+ name: selectedConfig?.name || '',
+ to: selectedConfig.to || '',
+ html: selectedConfig.html || '',
+ headers: selectedConfig.headers || {},
+ id,
+ }),
+ [id, selectedConfig],
+ );
+
+ const onEmailEditHandler = useCallback(async () => {
+ setSavingState(true);
+ const request = prepareEmailRequest();
+ const response = await editEmail(request);
+ if (response.statusCode === 200) {
+ notifications.success({
+ message: 'Success',
+ description: t('channel_edit_done'),
+ });
+ history.replace(ROUTES.ALL_CHANNELS);
+ } else {
+ notifications.error({
+ message: 'Error',
+ description: response.error || t('channel_edit_failed'),
+ });
+ }
+ setSavingState(false);
+ }, [prepareEmailRequest, t, notifications]);
+
const preparePagerRequest = useCallback(
() => ({
name: selectedConfig.name || '',
@@ -300,6 +334,8 @@ function EditAlertChannels({
onMsTeamsEditHandler();
} else if (value === ChannelType.Opsgenie) {
onOpsgenieEditHandler();
+ } else if (value === ChannelType.Email) {
+ onEmailEditHandler();
}
},
[
@@ -308,6 +344,7 @@ function EditAlertChannels({
onPagerEditHandler,
onMsTeamsEditHandler,
onOpsgenieEditHandler,
+ onEmailEditHandler,
],
);
@@ -338,6 +375,10 @@ function EditAlertChannels({
request = prepareOpsgenieRequest();
if (request) response = await testOpsgenie(request);
break;
+ case ChannelType.Email:
+ request = prepareEmailRequest();
+ if (request) response = await testEmail(request);
+ break;
default:
notifications.error({
message: 'Error',
@@ -373,6 +414,7 @@ function EditAlertChannels({
prepareSlackRequest,
prepareMsTeamsRequest,
prepareOpsgenieRequest,
+ prepareEmailRequest,
notifications,
],
);
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx
new file mode 100644
index 0000000000..a2e0eff9c8
--- /dev/null
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionWrapper.tsx
@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+import ExplorerOptions, { ExplorerOptionsProps } from './ExplorerOptions';
+import { getExplorerToolBarVisibility } from './utils';
+
+type ExplorerOptionsWrapperProps = Omit<
+ ExplorerOptionsProps,
+ 'isExplorerOptionDrop'
+>;
+
+function ExplorerOptionWrapper({
+ disabled,
+ query,
+ isLoading,
+ onExport,
+ sourcepage,
+}: ExplorerOptionsWrapperProps): JSX.Element {
+ const [isExplorerOptionHidden, setIsExplorerOptionHidden] = useState(false);
+
+ useEffect(() => {
+ const toolbarVisibility = getExplorerToolBarVisibility(sourcepage);
+ setIsExplorerOptionHidden(!toolbarVisibility);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+ (false);
const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
@@ -71,6 +100,8 @@ function ExplorerOptions({
setIsSaveModalOpen(false);
};
+ const { role } = useSelector((state) => state.app);
+
const onCreateAlertsHandler = useCallback(() => {
history.push(
`${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
@@ -247,10 +278,24 @@ function ExplorerOptions({
[isDarkMode],
);
+ const hideToolbar = (): void => {
+ setExplorerToolBarVisibility(false, sourcepage);
+ if (setIsExplorerOptionHidden) {
+ setIsExplorerOptionHidden(true);
+ }
+ };
+
+ const isEditDeleteSupported = allowedRoles.includes(role as string);
+
return (
<>
- {isQueryUpdated && (
-
This is custom element
; +} + function MarkdownRenderer({ markdownContent, variables, @@ -85,12 +91,14 @@ function MarkdownRenderer({ return ({text}
,
},
- {
- title: 'Unit',
- dataIndex: 'unit',
- key: 'unit',
- },
{
title: 'Data Ingested',
dataIndex: 'dataIngested',
@@ -230,24 +258,6 @@ export default function BillingContainer(): JSX.Element {
},
];
- const renderSummary = (): JSX.Element => (
-
+
+ | + |
+
+
+ |
+ + |
+ {isQueryUpdated && !isExplorerOptionHidden && (
+
}
/>
-
}
@@ -269,86 +317,103 @@ function ExplorerOptions({
)}
- >;
}
-ExplorerOptions.defaultProps = { isLoading: false };
+ExplorerOptions.defaultProps = {
+ isLoading: false,
+ isExplorerOptionHidden: false,
+ setIsExplorerOptionHidden: undefined,
+};
export default ExplorerOptions;
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss
new file mode 100644
index 0000000000..e45b9e893c
--- /dev/null
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.styles.scss
@@ -0,0 +1,55 @@
+.explorer-option-droppable-container {
+ position: fixed;
+ bottom: 0;
+ width: -webkit-fill-available;
+ height: 24px;
+ display: flex;
+ justify-content: center;
+ border-radius: 10px 10px 0px 0px;
+ // box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+ // backdrop-filter: blur(20px);
+
+ .explorer-actions-btn {
+ display: flex;
+ gap: 8px;
+ margin-right: 8px;
+
+ .action-btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 10px 10px 0px 0px;
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(20px);
+ height: 24px !important;
+ border: none;
+ }
+ }
+
+ .explorer-show-btn {
+ border-radius: 10px 10px 0px 0px;
+ border: 1px solid var(--bg-slate-400);
+ background: rgba(22, 24, 29, 0.40);
+ box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.25);
+ backdrop-filter: blur(20px);
+ align-self: center;
+ padding: 8px 12px;
+ height: 24px !important;
+
+ .menu-bar {
+ border-radius: 50px;
+ background: var(--bg-slate-200);
+ height: 4px;
+ width: 50px;
+ }
+ }
+}
+
+.lightMode {
+ .explorer-option-droppable-container {
+
+ .explorer-show-btn {
+ background: var(--bg-vanilla-200);
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
new file mode 100644
index 0000000000..f5e7faf0dc
--- /dev/null
+++ b/frontend/src/container/ExplorerOptions/ExplorerOptionsHideArea.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable no-nested-ternary */
+import './ExplorerOptionsHideArea.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Tooltip } from 'antd';
+import { Disc3, X } from 'lucide-react';
+import { Dispatch, SetStateAction } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { setExplorerToolBarVisibility } from './utils';
+
+interface DroppableAreaProps {
+ isQueryUpdated: boolean;
+ isExplorerOptionHidden?: boolean;
+ sourcepage: DataSource;
+ setIsExplorerOptionHidden?: Dispatch>;
+ handleClearSelect: () => void;
+ onUpdateQueryHandler: () => void;
+}
+
+function ExplorerOptionsHideArea({
+ isQueryUpdated,
+ isExplorerOptionHidden,
+ sourcepage,
+ setIsExplorerOptionHidden,
+ handleClearSelect,
+ onUpdateQueryHandler,
+}: DroppableAreaProps): JSX.Element {
+ const handleShowExplorerOption = (): void => {
+ if (setIsExplorerOptionHidden) {
+ setIsExplorerOptionHidden(false);
+ setExplorerToolBarVisibility(true, sourcepage);
+ }
+ };
+
+ return (
+ ,
+ ): void => {
+ setSelectedConfig((value) => ({
+ ...value,
+ [field]: event.target.value,
+ }));
+ };
+
+ return (
+ <>
+
+
+
+
+ {/*
+
+ */}
+
+ );
+}
+
+interface EmailFormProps {
+ setSelectedConfig: Dispatch>>;
+}
+
+export default EmailForm;
diff --git a/frontend/src/container/FormAlertChannels/index.tsx b/frontend/src/container/FormAlertChannels/index.tsx
index 832bbe25ff..844e86236f 100644
--- a/frontend/src/container/FormAlertChannels/index.tsx
+++ b/frontend/src/container/FormAlertChannels/index.tsx
@@ -5,6 +5,7 @@ import { FeatureKeys } from 'constants/features';
import ROUTES from 'constants/routes';
import {
ChannelType,
+ EmailChannel,
OpsgenieChannel,
PagerChannel,
SlackChannel,
@@ -16,6 +17,7 @@ import history from 'lib/history';
import { Dispatch, ReactElement, SetStateAction } from 'react';
import { useTranslation } from 'react-i18next';
+import EmailSettings from './Settings/Email';
import MsTeamsSettings from './Settings/MsTeams';
import OpsgenieSettings from './Settings/Opsgenie';
import PagerSettings from './Settings/Pager';
@@ -69,6 +71,8 @@ function FormAlertChannels({
return
Opsgenie
+
+ Email
+
{!isOssFeature?.active && (
-
- -
+ )}
+
+
-
- showSearch
- placeholder="Select a view"
- loading={viewsIsLoading || isRefetching}
- value={viewName || undefined}
- onSelect={handleSelect}
- style={{
- minWidth: 170,
- }}
- dropdownStyle={dropdownStyle}
- className="views-dropdown"
- allowClear={{
- clearIcon:
-
- );
- })}
-
-
-
-
-
-
- {' '}
- {view.name}
-
- - -
-
-
-
+ {isExplorerOptionHidden && (
+ <>
+ {isQueryUpdated && (
+
+ );
+}
+
+ExplorerOptionsHideArea.defaultProps = {
+ isExplorerOptionHidden: undefined,
+ setIsExplorerOptionHidden: undefined,
+};
+
+export default ExplorerOptionsHideArea;
diff --git a/frontend/src/container/ExplorerOptions/utils.ts b/frontend/src/container/ExplorerOptions/utils.ts
index e3ac710609..d94e64161e 100644
--- a/frontend/src/container/ExplorerOptions/utils.ts
+++ b/frontend/src/container/ExplorerOptions/utils.ts
@@ -1,5 +1,6 @@
import { Color } from '@signozhq/design-tokens';
import { showErrorNotification } from 'components/ExplorerCard/utils';
+import { LOCALSTORAGE } from 'constants/localStorage';
import { QueryParams } from 'constants/query';
import ROUTES from 'constants/routes';
import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
@@ -67,3 +68,54 @@ export const generateRGBAFromHex = (hex: string, opacity: number): string =>
hex.slice(3, 5),
16,
)}, ${parseInt(hex.slice(5, 7), 16)}, ${opacity})`;
+
+export const getExplorerToolBarVisibility = (dataSource: string): boolean => {
+ try {
+ const showExplorerToolbar = localStorage.getItem(
+ LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+ );
+ if (showExplorerToolbar === null) {
+ const parsedShowExplorerToolbar: {
+ [DataSource.LOGS]: boolean;
+ [DataSource.TRACES]: boolean;
+ [DataSource.METRICS]: boolean;
+ } = {
+ [DataSource.METRICS]: true,
+ [DataSource.TRACES]: true,
+ [DataSource.LOGS]: true,
+ };
+ localStorage.setItem(
+ LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+ JSON.stringify(parsedShowExplorerToolbar),
+ );
+ return true;
+ }
+ const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar || '{}');
+ return parsedShowExplorerToolbar[dataSource];
+ } catch (error) {
+ console.error(error);
+ return false;
+ }
+};
+
+export const setExplorerToolBarVisibility = (
+ value: boolean,
+ dataSource: string,
+): void => {
+ try {
+ const showExplorerToolbar = localStorage.getItem(
+ LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+ );
+ if (showExplorerToolbar) {
+ const parsedShowExplorerToolbar = JSON.parse(showExplorerToolbar);
+ parsedShowExplorerToolbar[dataSource] = value;
+ localStorage.setItem(
+ LOCALSTORAGE.SHOW_EXPLORER_TOOLBAR,
+ JSON.stringify(parsedShowExplorerToolbar),
+ );
+ return;
+ }
+ } catch (error) {
+ console.error(error);
+ }
+};
diff --git a/frontend/src/container/FormAlertChannels/Settings/Email.tsx b/frontend/src/container/FormAlertChannels/Settings/Email.tsx
new file mode 100644
index 0000000000..398e172a57
--- /dev/null
+++ b/frontend/src/container/FormAlertChannels/Settings/Email.tsx
@@ -0,0 +1,48 @@
+import { Form, Input } from 'antd';
+import { Dispatch, SetStateAction } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { EmailChannel } from '../../CreateAlertChannels/config';
+
+function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {
+ const { t } = useTranslation('channels');
+
+ const handleInputChange = (field: string) => (
+ event: React.ChangeEvent
+
+ }
+ />
+
+
+ }
+ />
+
+
+ )}
+
+
+ )}
+
@@ -151,7 +158,13 @@ interface FormAlertChannelsProps {
type: ChannelType;
setSelectedConfig: Dispatch<
SetStateAction<
- Partial
+ Partial<
+ SlackChannel &
+ WebhookChannel &
+ PagerChannel &
+ OpsgenieChannel &
+ EmailChannel
+ >
>
>;
onTypeChangeHandler: (value: ChannelType) => void;
diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
index 9df51314d0..6e8c167c29 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -1,5 +1,7 @@
import { InfoCircleOutlined } from '@ant-design/icons';
import Spinner from 'components/Spinner';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { QueryParams } from 'constants/query';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import GridPanelSwitch from 'container/GridPanelSwitch';
import { getFormatNameByOptionId } from 'container/NewWidget/RightContainer/alertFomatCategories';
@@ -9,11 +11,17 @@ import { Time as TimeV2 } from 'container/TopNav/DateTimeSelectionV2/config';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
import { useIsDarkMode } from 'hooks/useDarkMode';
import { useResizeObserver } from 'hooks/useDimensions';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import getTimeString from 'lib/getTimeString';
+import history from 'lib/history';
import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
import { AppState } from 'store/reducers';
import { AlertDef } from 'types/api/alerts/def';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
@@ -39,6 +47,7 @@ export interface ChartPreviewProps {
yAxisUnit: string;
}
+// eslint-disable-next-line sonarjs/cognitive-complexity
function ChartPreview({
name,
query,
@@ -52,6 +61,7 @@ function ChartPreview({
yAxisUnit,
}: ChartPreviewProps): JSX.Element | null {
const { t } = useTranslation('alerts');
+ const dispatch = useDispatch();
const threshold = alertDef?.condition.target || 0;
const [minTimeScale, setMinTimeScale] = useState();
const [maxTimeScale, setMaxTimeScale] = useState();
@@ -61,6 +71,30 @@ function ChartPreview({
GlobalReducer
>((state) => state.globalTime);
+ const handleBackNavigation = (): void => {
+ const searchParams = new URLSearchParams(window.location.search);
+ const startTime = searchParams.get(QueryParams.startTime);
+ const endTime = searchParams.get(QueryParams.endTime);
+
+ if (startTime && endTime && startTime !== endTime) {
+ dispatch(
+ UpdateTimeInterval('custom', [
+ parseInt(getTimeString(startTime), 10),
+ parseInt(getTimeString(endTime), 10),
+ ]),
+ );
+ }
+ };
+
+ useEffect(() => {
+ window.addEventListener('popstate', handleBackNavigation);
+
+ return (): void => {
+ window.removeEventListener('popstate', handleBackNavigation);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
const canQuery = useMemo((): boolean => {
if (!query || query == null) {
return false;
@@ -94,6 +128,7 @@ function ChartPreview({
allowSelectedIntervalForStepGen,
},
},
+ alertDef?.version || DEFAULT_ENTITY_VERSION,
{
queryKey: [
'chartPreview',
@@ -128,10 +163,34 @@ function ChartPreview({
const containerDimensions = useResizeObserver(graphRef);
const isDarkMode = useIsDarkMode();
+ const urlQuery = useUrlQuery();
+ const location = useLocation();
const optionName =
getFormatNameByOptionId(alertDef?.condition.targetUnit || '') || '';
+ const onDragSelect = useCallback(
+ (start: number, end: number): void => {
+ const startTimestamp = Math.trunc(start);
+ const endTimestamp = Math.trunc(end);
+
+ if (startTimestamp !== endTimestamp) {
+ dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+ }
+
+ const { maxTime, minTime } = GetMinMax('custom', [
+ startTimestamp,
+ endTimestamp,
+ ]);
+
+ urlQuery.set(QueryParams.startTime, minTime.toString());
+ urlQuery.set(QueryParams.endTime, maxTime.toString());
+ const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+ history.push(generatedUrl);
+ },
+ [dispatch, location.pathname, urlQuery],
+ );
+
const options = useMemo(
() =>
getUPlotChartOptions({
@@ -142,6 +201,7 @@ function ChartPreview({
minTimeScale,
maxTimeScale,
isDarkMode,
+ onDragSelect,
thresholds: [
{
index: '0', // no impact
@@ -171,6 +231,7 @@ function ChartPreview({
minTimeScale,
maxTimeScale,
isDarkMode,
+ onDragSelect,
threshold,
t,
optionName,
diff --git a/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
new file mode 100644
index 0000000000..4ebb81c146
--- /dev/null
+++ b/frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
@@ -0,0 +1,45 @@
+.create-alert-modal {
+ .ant-modal-content {
+ background-color: var(--bg-ink-300);
+ .ant-modal-confirm-title {
+ color: var(--bg-vanilla-100);
+ }
+
+ .ant-modal-confirm-content {
+ .ant-typography {
+ color: var(--bg-vanilla-100);
+ }
+ }
+
+ .ant-modal-confirm-btns {
+ button:nth-of-type(1) {
+ background-color: var(--bg-slate-400);
+ border: none;
+ color: var(--bg-vanilla-100);
+ }
+ }
+ }
+}
+
+.lightMode {
+ .ant-modal-content {
+ background-color: var(--bg-vanilla-100);
+ .ant-modal-confirm-title {
+ color: var(--bg-ink-500);
+ }
+
+ .ant-modal-confirm-content {
+ .ant-typography {
+ color: var(--bg-ink-500);
+ }
+ }
+
+ .ant-modal-confirm-btns {
+ button:nth-of-type(1) {
+ background-color: var(--bg-vanilla-300);
+ border: none;
+ color: var(--bg-ink-500);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/container/FormAlertRules/QuerySection.tsx b/frontend/src/container/FormAlertRules/QuerySection.tsx
index 9eb4fd4703..1604cdb929 100644
--- a/frontend/src/container/FormAlertRules/QuerySection.tsx
+++ b/frontend/src/container/FormAlertRules/QuerySection.tsx
@@ -2,14 +2,18 @@ import './QuerySection.styles.scss';
import { Button, Tabs, Tooltip } from 'antd';
import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
import { QueryBuilder } from 'container/QueryBuilder';
+import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
import { Atom, Play, Terminal } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { AlertTypes } from 'types/api/alerts/alertTypes';
+import { AlertDef } from 'types/api/alerts/def';
import { EQueryType } from 'types/common/dashboard';
import AppReducer from 'types/reducer/app';
@@ -22,6 +26,7 @@ function QuerySection({
setQueryCategory,
alertType,
runQuery,
+ alertDef,
panelType,
}: QuerySectionProps): JSX.Element {
// init namespace for translations
@@ -50,6 +55,11 @@ function QuerySection({
queryVariant: 'static',
initialDataSource: ALERTS_DATA_SOURCE_MAP[alertType],
}}
+ showFunctions={
+ alertType === AlertTypes.METRICS_BASED_ALERT &&
+ alertDef.version === ENTITY_VERSION_V4
+ }
+ version={alertDef.version || 'v3'}
/>
);
@@ -112,6 +122,17 @@ function QuerySection({
[],
);
+ const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+
+ useEffect(() => {
+ registerShortcut(QBShortcuts.StageAndRunQuery, runQuery);
+
+ return (): void => {
+ deregisterShortcut(QBShortcuts.StageAndRunQuery);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [runQuery]);
+
const renderTabs = (typ: AlertTypes): JSX.Element | null => {
switch (typ) {
case AlertTypes.TRACES_BASED_ALERT:
@@ -197,6 +218,7 @@ interface QuerySectionProps {
setQueryCategory: (n: EQueryType) => void;
alertType: AlertTypes;
runQuery: VoidFunction;
+ alertDef: AlertDef;
panelType: PANEL_TYPES;
}
diff --git a/frontend/src/container/FormAlertRules/RuleOptions.tsx b/frontend/src/container/FormAlertRules/RuleOptions.tsx
index e4ae376c73..2ef6bba4c0 100644
--- a/frontend/src/container/FormAlertRules/RuleOptions.tsx
+++ b/frontend/src/container/FormAlertRules/RuleOptions.tsx
@@ -1,4 +1,6 @@
import {
+ Checkbox,
+ Collapse,
Form,
InputNumber,
InputNumberProps,
@@ -18,12 +20,18 @@ import {
AlertDef,
defaultCompareOp,
defaultEvalWindow,
+ defaultFrequency,
defaultMatchType,
} from 'types/api/alerts/def';
import { EQueryType } from 'types/common/dashboard';
import { popupContainer } from 'utils/selectPopupContainer';
-import { FormContainer, InlineSelect, StepHeading } from './styles';
+import {
+ FormContainer,
+ InlineSelect,
+ StepHeading,
+ VerticalLine,
+} from './styles';
function RuleOptions({
alertDef,
@@ -199,6 +207,35 @@ function RuleOptions({
});
};
+ const onChangeFrequency = (value: string | unknown): void => {
+ const freq = (value as string) || alertDef.frequency;
+ setAlertDef({
+ ...alertDef,
+ frequency: freq,
+ });
+ };
+
+ const renderFrequency = (): JSX.Element => (
+
+ {t('option_1min')}
+ {t('option_5min')}
+ {t('option_10min')}
+ {t('option_15min')}
+ {t('option_30min')}
+ {t('option_60min')}
+ {t('option_3hours')}
+ {t('option_6hours')}
+ {t('option_12hours')}
+ {t('option_24hours')}
+
+ );
+
const selectedCategory = getCategoryByOptionId(currentQuery?.unit || '');
const categorySelectOptions = getCategorySelectOptionByName(
@@ -213,28 +250,81 @@ function RuleOptions({
? renderPromRuleOptions()
: renderThresholdRuleOpts()}
-
-
- e.currentTarget.blur()}
- />
-
+
+
+
+ e.currentTarget.blur()}
+ />
+
-
-
-
+
+
+
+
+
+
+
+
+
+ {t('text_alert_frequency')}
+ {renderFrequency()}
+
+
+
+
+
+
+ {
+ setAlertDef({
+ ...alertDef,
+ condition: {
+ ...alertDef.condition,
+ alertOnAbsent: e.target.checked,
+ },
+ });
+ }}
+ />
+
+ {t('text_alert_on_absent')}
+
+
+ {
+ setAlertDef({
+ ...alertDef,
+ condition: {
+ ...alertDef.condition,
+ absentFor: Number(value) || 0,
+ },
+ });
+ }}
+ type="number"
+ onWheel={(e): void => e.currentTarget.blur()}
+ />
+
+ {t('text_for')}
+
+
+
+
+
diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx
index 396474211f..09d4a957a7 100644
--- a/frontend/src/container/FormAlertRules/index.tsx
+++ b/frontend/src/container/FormAlertRules/index.tsx
@@ -1,3 +1,5 @@
+import './FormAlertRules.styles.scss';
+
import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
import {
Col,
@@ -304,7 +306,7 @@ function FormAlertRules({
panelType,
]);
- const isAlertAvialable = useIsFeatureDisabled(
+ const isAlertAvailable = useIsFeatureDisabled(
FeatureKeys.QUERY_BUILDER_ALERTS,
);
@@ -373,6 +375,7 @@ function FormAlertRules({
centered: true,
content,
onOk: saveRule,
+ className: 'create-alert-modal',
});
}, [t, saveRule, currentQuery]);
@@ -458,8 +461,8 @@ function FormAlertRules({
const isAlertNameMissing = !formInstance.getFieldValue('alert');
- const isAlertAvialableToSave =
- isAlertAvialable &&
+ const isAlertAvailableToSave =
+ isAlertAvailable &&
currentQuery.queryType === EQueryType.QUERY_BUILDER &&
alertType !== AlertTypes.METRICS_BASED_ALERT;
@@ -509,6 +512,7 @@ function FormAlertRules({
setQueryCategory={onQueryCategoryChange}
alertType={alertType || AlertTypes.METRICS_BASED_ALERT}
runQuery={handleRunQuery}
+ alertDef={alertDef}
panelType={panelType || PANEL_TYPES.TIME_SERIES}
/>
@@ -521,7 +525,7 @@ function FormAlertRules({
{renderBasicInfo()}
-
+
>;
}
export interface GraphManagerProps extends UplotProps {
diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts b/frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts
index bbbca2e834..0a7a52a5c1 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/utils.ts
@@ -1,4 +1,6 @@
import { LOCALSTORAGE } from 'constants/localStorage';
+import getLabelName from 'lib/getLabelName';
+import { QueryData } from 'types/api/widgets/getQuery';
import uPlot from 'uplot';
import {
@@ -55,6 +57,20 @@ export const getAbbreviatedLabel = (label: string): string => {
return newLabel;
};
+export const showAllDataSetFromApiResponse = (
+ apiResponse: QueryData[],
+): LegendEntryProps[] =>
+ apiResponse.map(
+ (item): LegendEntryProps => ({
+ label: getLabelName(
+ item.metric || {},
+ item.queryName || '',
+ item.legend || '',
+ ),
+ show: true,
+ }),
+ );
+
export const showAllDataSet = (options: uPlot.Options): LegendEntryProps[] =>
options.series
.map(
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index a07a4197e9..3dddc46884 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -32,13 +32,14 @@ import WidgetHeader from '../WidgetHeader';
import FullView from './FullView';
import { Modal } from './styles';
import { WidgetGraphComponentProps } from './types';
-import { getGraphVisibilityStateOnDataChange } from './utils';
+import { getLocalStorageGraphVisibilityState } from './utils';
function WidgetGraphComponent({
widget,
queryResponse,
errorMessage,
name,
+ version,
threshold,
headerMenuList,
isWarning,
@@ -62,20 +63,6 @@ function WidgetGraphComponent({
const lineChartRef = useRef();
const graphRef = useRef(null);
- useEffect(() => {
- if (queryResponse.isSuccess) {
- const {
- graphVisibilityStates: localStoredVisibilityState,
- } = getGraphVisibilityStateOnDataChange({
- options,
- isExpandedName: false,
- name,
- });
- setGraphVisibility(localStoredVisibilityState);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [queryResponse.isSuccess]);
-
useEffect(() => {
if (!lineChartRef.current) return;
@@ -218,6 +205,15 @@ function WidgetGraphComponent({
const existingSearchParams = new URLSearchParams(search);
existingSearchParams.delete(QueryParams.expandedWidgetId);
const updatedQueryParams = Object.fromEntries(existingSearchParams.entries());
+ if (queryResponse.data?.payload) {
+ const {
+ graphVisibilityStates: localStoredVisibilityState,
+ } = getLocalStorageGraphVisibilityState({
+ apiResponse: queryResponse.data.payload.data.result,
+ name,
+ });
+ setGraphVisibility(localStoredVisibilityState);
+ }
history.push({
pathname,
search: createQueryParams(updatedQueryParams),
@@ -283,14 +279,13 @@ function WidgetGraphComponent({
>
();
@@ -132,6 +135,7 @@ function GridCardGraph({
globalSelectedInterval,
variables: getDashboardVariables(variables),
},
+ version || DEFAULT_ENTITY_VERSION,
{
queryKey: [
maxTime,
@@ -183,6 +187,16 @@ function GridCardGraph({
Array(queryResponse.data?.payload?.data.result.length || 0).fill(true),
);
+ useEffect(() => {
+ const {
+ graphVisibilityStates: localStoredVisibilityState,
+ } = getLocalStorageGraphVisibilityState({
+ apiResponse: queryResponse.data?.payload.data.result || [],
+ name,
+ });
+ setGraphVisibility(localStoredVisibilityState);
+ }, [name, queryResponse.data?.payload.data.result]);
+
const options = useMemo(
() =>
getUPlotChartOptions({
@@ -234,6 +248,7 @@ function GridCardGraph({
errorMessage={errorMessage}
isWarning={false}
name={name}
+ version={version}
onDragSelect={onDragSelect}
threshold={threshold}
headerMenuList={menuList}
@@ -253,6 +268,7 @@ GridCardGraph.defaultProps = {
isQueryEnabled: true,
threshold: undefined,
headerMenuList: [MenuItemKeys.View],
+ version: 'v3',
};
export default memo(GridCardGraph);
diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
index 59711ef9e5..9e527c143d 100644
--- a/frontend/src/container/GridCardLayout/GridCard/types.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -23,6 +23,7 @@ export interface WidgetGraphComponentProps extends UplotProps {
>;
errorMessage: string | undefined;
name: string;
+ version?: string;
onDragSelect: (start: number, end: number) => void;
onClickHandler?: OnClickPluginOpts['onClick'];
threshold?: ReactNode;
@@ -43,6 +44,7 @@ export interface GridCardGraphProps {
isQueryEnabled: boolean;
variables?: Dashboard['data']['variables'];
fillSpans?: boolean;
+ version?: string;
}
export interface GetGraphVisibilityStateOnLegendClickProps {
diff --git a/frontend/src/container/GridCardLayout/GridCard/utils.ts b/frontend/src/container/GridCardLayout/GridCard/utils.ts
index ebf9fa612e..e14903c33d 100644
--- a/frontend/src/container/GridCardLayout/GridCard/utils.ts
+++ b/frontend/src/container/GridCardLayout/GridCard/utils.ts
@@ -1,14 +1,78 @@
/* eslint-disable sonarjs/cognitive-complexity */
import { LOCALSTORAGE } from 'constants/localStorage';
+import getLabelName from 'lib/getLabelName';
+import { QueryData } from 'types/api/widgets/getQuery';
import { LegendEntryProps } from './FullView/types';
-import { showAllDataSet } from './FullView/utils';
+import {
+ showAllDataSet,
+ showAllDataSetFromApiResponse,
+} from './FullView/utils';
import {
GetGraphVisibilityStateOnLegendClickProps,
GraphVisibilityLegendEntryProps,
ToggleGraphsVisibilityInChartProps,
} from './types';
+export const getLocalStorageGraphVisibilityState = ({
+ apiResponse,
+ name,
+}: {
+ apiResponse: QueryData[];
+ name: string;
+}): GraphVisibilityLegendEntryProps => {
+ const visibilityStateAndLegendEntry: GraphVisibilityLegendEntryProps = {
+ graphVisibilityStates: Array(apiResponse.length + 1).fill(true),
+ legendEntry: [
+ {
+ label: 'Timestamp',
+ show: true,
+ },
+ ...showAllDataSetFromApiResponse(apiResponse),
+ ],
+ };
+
+ if (localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES) !== null) {
+ const legendGraphFromLocalStore = localStorage.getItem(
+ LOCALSTORAGE.GRAPH_VISIBILITY_STATES,
+ );
+ let legendFromLocalStore: {
+ name: string;
+ dataIndex: LegendEntryProps[];
+ }[] = [];
+
+ try {
+ legendFromLocalStore = JSON.parse(legendGraphFromLocalStore || '[]');
+ } catch (error) {
+ console.error(
+ 'Error parsing GRAPH_VISIBILITY_STATES from local storage',
+ error,
+ );
+ }
+
+ const newGraphVisibilityStates = Array(apiResponse.length + 1).fill(true);
+ legendFromLocalStore.forEach((item) => {
+ const newName = name;
+ if (item.name === newName) {
+ visibilityStateAndLegendEntry.legendEntry = item.dataIndex;
+ apiResponse.forEach((datasets, i) => {
+ const index = item.dataIndex.findIndex(
+ (dataKey) =>
+ dataKey.label ===
+ getLabelName(datasets.metric, datasets.queryName, datasets.legend || ''),
+ );
+ if (index !== -1) {
+ newGraphVisibilityStates[i + 1] = item.dataIndex[index].show;
+ }
+ });
+ visibilityStateAndLegendEntry.graphVisibilityStates = newGraphVisibilityStates;
+ }
+ });
+ }
+
+ return visibilityStateAndLegendEntry;
+};
+
export const getGraphVisibilityStateOnDataChange = ({
options,
isExpandedName,
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
index c8b1c72897..4b27dbda43 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss
@@ -1,6 +1,6 @@
.fullscreen-grid-container {
overflow: auto;
- margin-top: 1rem;
+ margin: 8px -8px;
.react-grid-layout {
border: none !important;
diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
index b4f1dbe19c..16ae0eeaa5 100644
--- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx
+++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx
@@ -1,6 +1,7 @@
import './GridCardLayout.styles.scss';
import { PlusOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { themeColors } from 'constants/theme';
@@ -144,17 +145,19 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
return (
<>
- }
- disabled={updateDashboardMutation.isLoading}
- >
- {t('dashboard:full_view')}
-
+
+ }
+ disabled={updateDashboardMutation.isLoading}
+ />
+
{!isDashboardLocked && addPanelPermission && (
}
data-testid="add-panel"
@@ -201,6 +204,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
headerMenuList={widgetActions}
variables={variables}
fillSpans={currentWidget?.fillSpans}
+ version={selectedDashboard?.data?.version}
/>
diff --git a/frontend/src/container/GridCardLayout/styles.ts b/frontend/src/container/GridCardLayout/styles.ts
index 0d79ea0f3b..224bb8d4de 100644
--- a/frontend/src/container/GridCardLayout/styles.ts
+++ b/frontend/src/container/GridCardLayout/styles.ts
@@ -80,7 +80,6 @@ export const ReactGridLayout = styled(ReactGridLayoutComponent)`
export const ButtonContainer = styled(Space)`
display: flex;
justify-content: end;
- margin-top: 1rem;
`;
export const Button = styled(ButtonComponent)`
diff --git a/frontend/src/container/GridPanelSwitch/index.tsx b/frontend/src/container/GridPanelSwitch/index.tsx
index 1eef235a8c..18d4e7a63a 100644
--- a/frontend/src/container/GridPanelSwitch/index.tsx
+++ b/frontend/src/container/GridPanelSwitch/index.tsx
@@ -1,4 +1,5 @@
import { ToggleGraphProps } from 'components/Graph/types';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { getComponentForPanelType } from 'constants/panelTypes';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { GRID_TABLE_CONFIG } from 'container/GridTableComponent/config';
@@ -50,11 +51,13 @@ const GridPanelSwitch = forwardRef<
? {
selectedLogsFields: selectedLogFields || [],
query,
+ version: DEFAULT_ENTITY_VERSION, // As we don't support for Metrics, defaulting to v3
selectedTime,
}
: {
selectedTracesFields: selectedTracesFields || [],
query,
+ version: DEFAULT_ENTITY_VERSION, // As we don't support for Metrics, defaulting to v3
selectedTime,
},
[PANEL_TYPES.TRACE]: null,
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 1851e1d71a..7e904c6d26 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -10,6 +10,7 @@ import {
import DynamicColumnTable from 'components/ResizeTable/DynamicColumnTable';
import LabelColumn from 'components/TableRenderer/LabelColumn';
import TextToolTip from 'components/TextToolTip';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import ROUTES from 'constants/routes';
import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
import useComponentPermission from 'hooks/useComponentPermission';
@@ -109,7 +110,6 @@ function DashboardsList(): JSX.Element {
width: 30,
key: DynamicColumnsKey.CreatedAt,
sorter: (a: Data, b: Data): number => {
- console.log({ a });
const prev = new Date(a.createdAt).getTime();
const next = new Date(b.createdAt).getTime();
@@ -211,6 +211,7 @@ function DashboardsList(): JSX.Element {
ns: 'dashboard',
}),
uploadedGrafana: false,
+ version: ENTITY_VERSION_V4,
});
if (response.statusCode === 200) {
@@ -304,52 +305,56 @@ function DashboardsList(): JSX.Element {
loading={isFilteringDashboards}
style={{ marginBottom: 16, marginTop: 16 }}
defaultValue={searchString}
+ autoFocus
/>
-
-
-
-
-
+
+
+
- {getText()}
-
-
-
+
+
+ )}
),
[
isDashboardListLoading,
handleSearch,
isFilteringDashboards,
+ searchString,
+ createNewDashboard,
getMenuItems,
newDashboardState.loading,
newDashboardState.error,
getText,
- searchString,
],
);
diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
index 3d208c0e93..39a39ab990 100644
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -71,6 +71,7 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
key={log.id}
logData={log}
selectedFields={selectedFields}
+ linesPerRow={options.maxLines}
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
/>
@@ -122,12 +123,14 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
fields: selectedFields,
linesPerRow: options.maxLines,
appendTo: 'end',
+ activeLogIndex,
}}
/>
) : (
(1);
+ const [afterLogPage, setAfterLogPage] = useState(1);
+ const [logs, setLogs] = useState([log]);
+
+ const {
+ logs: previousLogs,
+ isFetching: isPreviousLogsFetching,
+ handleShowNextLines: handlePreviousLogsShowNextLine,
+ } = useContextLogData({
+ log,
+ filters,
+ isEdit,
+ query,
+ order: ORDERBY_FILTERS.ASC,
+ page: prevLogPage,
+ setPage: setPrevLogPage,
+ });
+
+ const {
+ logs: afterLogs,
+ isFetching: isAfterLogsFetching,
+ handleShowNextLines: handleAfterLogsShowNextLine,
+ } = useContextLogData({
+ log,
+ filters,
+ isEdit,
+ query,
+ order: ORDERBY_FILTERS.DESC,
+ page: afterLogPage,
+ setPage: setAfterLogPage,
+ });
+
+ useEffect(() => {
+ setLogs((prev) => [...previousLogs, ...prev]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [previousLogs]);
+
+ useEffect(() => {
+ setLogs((prev) => [...prev, ...afterLogs]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [afterLogs]);
+
+ useEffect(() => {
+ setLogs([log]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [filters]);
+
+ const getItemContent = useCallback(
+ (_: number, logTorender: ILog): JSX.Element => (
+ >;
+}): {
+ logs: ILog[];
+ handleShowNextLines: () => void;
+ isError: boolean;
+ isFetching: boolean;
+ isDisabledFetch: boolean;
+} => {
+ const [logs, setLogs] = useState([]);
+
+ const orderByTimestamp = useMemo(() => getOrderByTimestamp(order), [order]);
+
+ const logsMorePageSize = useMemo(() => (page - 1) * LOGS_MORE_PAGE_SIZE, [
+ page,
+ ]);
+ const pageSize = useMemo(
+ () => (page <= 1 ? INITIAL_PAGE_SIZE : logsMorePageSize + INITIAL_PAGE_SIZE),
+ [page, logsMorePageSize],
+ );
+ const isDisabledFetch = useMemo(() => logs.length < pageSize, [
+ logs.length,
+ pageSize,
+ ]);
+
+ const currentStagedQueryData = useMemo(() => {
+ if (!query || query.builder.queryData.length !== 1) return null;
+
+ return query.builder.queryData[0];
+ }, [query]);
+
+ const initialLogsRequest = useMemo(
+ () =>
+ getRequestData({
+ stagedQueryData: currentStagedQueryData,
+ query,
+ log,
+ orderByTimestamp,
+ page,
+ }),
+ [currentStagedQueryData, page, log, query, orderByTimestamp],
+ );
+
+ const [requestData, setRequestData] = useState(
+ initialLogsRequest,
+ );
+
+ const handleSuccess = useCallback(
+ (data: SuccessResponse) => {
+ const currentData = data?.payload.data.newResult.data.result || [];
+
+ if (currentData.length > 0 && currentData[0].list) {
+ const currentLogs: ILog[] = currentData[0].list.map((item) => ({
+ ...item.data,
+ timestamp: item.timestamp,
+ }));
+
+ if (order === ORDERBY_FILTERS.ASC) {
+ const reversedCurrentLogs = currentLogs.reverse();
+ setLogs([...reversedCurrentLogs]);
+ } else {
+ setLogs([...currentLogs]);
+ }
+ }
+ },
+ [order],
+ );
+
+ const { isError, isFetching } = useGetExplorerQueryRange(
+ requestData,
+ PANEL_TYPES.LIST,
+ DEFAULT_ENTITY_VERSION,
+ {
+ keepPreviousData: true,
+ enabled: !!requestData,
+ onSuccess: handleSuccess,
+ },
+ );
+
+ const handleShowNextLines = useCallback(() => {
+ const newRequestData = getRequestData({
+ stagedQueryData: currentStagedQueryData,
+ query,
+ log,
+ orderByTimestamp,
+ page: page + 1,
+ pageSize: LOGS_MORE_PAGE_SIZE,
+ });
+
+ setPage((prevPage) => prevPage + 1);
+ setRequestData(newRequestData);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ query,
+ page,
+ order,
+ currentStagedQueryData,
+ isDisabledFetch,
+ orderByTimestamp,
+ ]);
+
+ useEffect(() => {
+ if (!isEdit) return;
+
+ const newRequestData = getRequestData({
+ stagedQueryData: currentStagedQueryData,
+ query,
+ log,
+ orderByTimestamp,
+ page: 1,
+ });
+
+ setPage(1);
+ setLogs([]);
+ setRequestData(newRequestData);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [filters]);
+
+ return {
+ logs,
+ handleShowNextLines,
+ isError,
+ isFetching,
+ isDisabledFetch,
+ };
+};
diff --git a/frontend/src/container/LogDetailedView/Overview.styles.scss b/frontend/src/container/LogDetailedView/Overview.styles.scss
index bc63db442c..8e1726a0a9 100644
--- a/frontend/src/container/LogDetailedView/Overview.styles.scss
+++ b/frontend/src/container/LogDetailedView/Overview.styles.scss
@@ -53,6 +53,19 @@
background: rgba(171, 189, 255, 0.04);
padding: 8px;
+
+ .ant-collapse-extra {
+ display: flex;
+ align-items: center;
+
+ .action-btn {
+ display: flex;
+
+ .ant-btn {
+ background: rgba(113, 144, 249, 0.08);
+ }
+ }
+ }
}
.ant-collapse-content {
diff --git a/frontend/src/container/LogDetailedView/TableView.styles.scss b/frontend/src/container/LogDetailedView/TableView.styles.scss
index 89101bf7b2..d9cbdcabbb 100644
--- a/frontend/src/container/LogDetailedView/TableView.styles.scss
+++ b/frontend/src/container/LogDetailedView/TableView.styles.scss
@@ -5,12 +5,13 @@
.ant-table-row:hover {
.ant-table-cell {
.value-field {
- display: flex;
- justify-content: space-between;
- align-items: center;
.action-btn {
display: flex;
- gap: 4px;
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ transform: translateY(-50%);
+ gap: 8px;
}
}
}
@@ -28,6 +29,30 @@
}
}
+ .attribute-pin {
+ cursor: pointer;
+
+ padding: 0;
+ vertical-align: middle;
+ text-align: center;
+
+ .log-attribute-pin {
+ padding: 8px;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ .pin-attribute-icon {
+ border: none;
+
+ &.pinned svg {
+ fill: var(--bg-robin-500);
+ }
+ }
+ }
+ }
+
.value-field-container {
background: rgba(22, 25, 34, 0.4);
@@ -70,6 +95,10 @@
.value-field-container {
background: var(--bg-vanilla-300);
+ &.attribute-pin {
+ background: var(--bg-vanilla-100);
+ }
+
.action-btn {
.filter-btn {
background: var(--bg-vanilla-300);
diff --git a/frontend/src/container/LogDetailedView/TableView.tsx b/frontend/src/container/LogDetailedView/TableView.tsx
index 593519404d..a69fba6441 100644
--- a/frontend/src/container/LogDetailedView/TableView.tsx
+++ b/frontend/src/container/LogDetailedView/TableView.tsx
@@ -1,22 +1,29 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
import './TableView.styles.scss';
import { LinkOutlined } from '@ant-design/icons';
import { Color } from '@signozhq/design-tokens';
import { Button, Space, Spin, Tooltip, Tree, Typography } from 'antd';
import { ColumnsType } from 'antd/es/table';
+import getLocalStorageApi from 'api/browser/localstorage/get';
+import setLocalStorageApi from 'api/browser/localstorage/set';
+import cx from 'classnames';
import AddToQueryHOC, {
AddToQueryHOCProps,
} from 'components/Logs/AddToQueryHOC';
import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
import { ResizeTable } from 'components/ResizeTable';
+import { LOCALSTORAGE } from 'constants/localStorage';
import { OPERATORS } from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
import history from 'lib/history';
import { fieldSearchFilter } from 'lib/logs/fieldSearch';
import { removeJSONStringifyQuotes } from 'lib/removeJSONStringifyQuotes';
import { isEmpty } from 'lodash-es';
-import { ArrowDownToDot, ArrowUpFromDot } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { ArrowDownToDot, ArrowUpFromDot, Pin } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
import { useDispatch } from 'react-redux';
import { generatePath } from 'react-router-dom';
import { Dispatch } from 'redux';
@@ -57,6 +64,28 @@ function TableView({
const dispatch = useDispatch>();
const [isfilterInLoading, setIsFilterInLoading] = useState(false);
const [isfilterOutLoading, setIsFilterOutLoading] = useState(false);
+ const isDarkMode = useIsDarkMode();
+
+ const [pinnedAttributes, setPinnedAttributes] = useState<
+ Record
+ >({});
+
+ useEffect(() => {
+ const pinnedAttributesFromLocalStorage = getLocalStorageApi(
+ LOCALSTORAGE.PINNED_ATTRIBUTES,
+ );
+
+ if (pinnedAttributesFromLocalStorage) {
+ try {
+ const parsedPinnedAttributes = JSON.parse(pinnedAttributesFromLocalStorage);
+ setPinnedAttributes(parsedPinnedAttributes);
+ } catch (e) {
+ console.error('Error parsing pinned attributes from local storgage');
+ }
+ } else {
+ setPinnedAttributes({});
+ }
+ }, []);
const flattenLogData: Record | null = useMemo(
() => (logData ? flattenObject(logData) : null),
@@ -74,6 +103,19 @@ function TableView({
}
};
+ const togglePinAttribute = (record: DataType): void => {
+ if (record) {
+ const newPinnedAttributes = { ...pinnedAttributes };
+ newPinnedAttributes[record.key] = !newPinnedAttributes[record.key];
+ setPinnedAttributes(newPinnedAttributes);
+
+ setLocalStorageApi(
+ LOCALSTORAGE.PINNED_ATTRIBUTES,
+ JSON.stringify(newPinnedAttributes),
+ );
+ }
+ };
+
const onClickHandler = (
operator: string,
fieldKey: string,
@@ -138,6 +180,37 @@ function TableView({
}
const columns: ColumnsType = [
+ {
+ title: '',
+ dataIndex: 'pin',
+ key: 'pin',
+ width: 5,
+ align: 'left',
+ className: 'attribute-pin value-field-container',
+ render: (fieldData: Record, record): JSX.Element => {
+ let pinColor = isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500;
+
+ if (pinnedAttributes[record?.key]) {
+ pinColor = Color.BG_ROBIN_500;
+ }
+
+ return (
+ [],
+ sortingObj: Record,
+ ): Record[] {
+ const sortingKeys = Object.keys(sortingObj);
+ return data.sort((a, b) => {
+ const aKey = a.key;
+ const bKey = b.key;
+ const aSortIndex = sortingKeys.indexOf(aKey);
+ const bSortIndex = sortingKeys.indexOf(bKey);
+
+ if (sortingObj[aKey] && !sortingObj[bKey]) {
+ return -1;
+ }
+ if (!sortingObj[aKey] && sortingObj[bKey]) {
+ return 1;
+ }
+ return aSortIndex - bSortIndex;
+ });
+ }
+
+ const sortedAttributes = sortPinnedAttributes(dataSource, pinnedAttributes);
return (
(
<>
`
td {
- ${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)}
+ ${({ $isActiveLog, $isDarkMode }): string =>
+ $isActiveLog
+ ? `background-color: ${
+ $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300
+ } !important`
+ : ''}
}
cursor: pointer;
diff --git a/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss b/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
index a6033da1ff..be6b8d627f 100644
--- a/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
+++ b/frontend/src/container/LogsExplorerList/LogsExplorerList.style.scss
@@ -1,8 +1,12 @@
.logs-list-view-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
font-family: 'Space Mono', monospace;
font-size: 14px;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.005em;
text-align: left;
+ min-height: 500px;
}
diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx
index dbc38b7923..fc5a1f6800 100644
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -16,7 +16,7 @@ import { useOptionsMenu } from 'container/OptionsMenu';
import { useActiveLog } from 'hooks/logs/useActiveLog';
import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
+import { memo, useCallback, useMemo, useRef } from 'react';
import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
// interfaces
import { ILog } from 'types/api/logs/log';
@@ -90,6 +90,7 @@ function LogsExplorerList({
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
activeLog={activeLog}
+ linesPerRow={options.maxLines}
/>
);
},
@@ -103,16 +104,6 @@ function LogsExplorerList({
],
);
- useEffect(() => {
- if (!activeLogId || activeLogIndex < 0) return;
-
- ref?.current?.scrollToIndex({
- index: activeLogIndex,
- align: 'start',
- behavior: 'smooth',
- });
- }, [activeLogId, activeLogIndex]);
-
const renderContent = useMemo(() => {
const components = isLoading
? {
@@ -130,6 +121,7 @@ function LogsExplorerList({
fields: selectedFields,
linesPerRow: options.maxLines,
appendTo: 'end',
+ activeLogIndex,
}}
infitiyTableProps={{ onEndReached }}
/>
@@ -143,6 +135,7 @@ function LogsExplorerList({
>
);
- }, [isLoading, options, logs, onEndReached, getItemContent, selectedFields]);
+ }, [
+ isLoading,
+ options.format,
+ options.maxLines,
+ activeLogIndex,
+ logs,
+ onEndReached,
+ getItemContent,
+ selectedFields,
+ ]);
return (
+
+ );
+}
+
+interface ContextLogRendererProps {
+ isEdit: boolean;
+ query: Query;
+ log: ILog;
+ filters: TagFilter | null;
+}
+
+export default ContextLogRenderer;
diff --git a/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss b/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss
index bc8ae4f719..bfb267b607 100644
--- a/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextView.styles.scss
@@ -1,3 +1,23 @@
.log-context-container {
border: 1px solid var(--bg-slate-400);
-}
\ No newline at end of file
+ flex: 1;
+ position: relative;
+ overflow: scroll;
+ overflow-x: hidden;
+
+ &::-webkit-scrollbar {
+ width: 0.3rem;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: var(--bg-slate-300);
+ }
+
+ &::-webkit-scrollbar-thumb:hover {
+ background: var(--bg-slate-200);
+ }
+}
diff --git a/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx b/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx
index e3a3c2d67b..fbb3f611f3 100644
--- a/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx
+++ b/frontend/src/container/LogDetailedView/ContextView/ContextView.tsx
@@ -1,11 +1,10 @@
import './ContextView.styles.scss';
-import RawLogView from 'components/Logs/RawLogView';
-import LogsContextList from 'container/LogsContextList';
-import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
import { ILog } from 'types/api/logs/log';
import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import ContextLogRenderer from './ContextLogRenderer';
+
interface LogContextProps {
log: ILog;
contextQuery: Query | undefined;
@@ -24,28 +23,11 @@ function ContextView({
return (
-
);
diff --git a/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts b/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts
new file mode 100644
index 0000000000..5a0ef84741
--- /dev/null
+++ b/frontend/src/container/LogDetailedView/ContextView/useContextLogData.ts
@@ -0,0 +1,163 @@
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import {
+ getOrderByTimestamp,
+ INITIAL_PAGE_SIZE,
+ LOGS_MORE_PAGE_SIZE,
+} from 'container/LogsContextList/configs';
+import { getRequestData } from 'container/LogsContextList/utils';
+import { ORDERBY_FILTERS } from 'container/QueryBuilder/filters/OrderByFilter/config';
+import { useGetExplorerQueryRange } from 'hooks/queryBuilder/useGetExplorerQueryRange';
+import {
+ Dispatch,
+ SetStateAction,
+ useCallback,
+ useEffect,
+ useMemo,
+ useState,
+} from 'react';
+import { SuccessResponse } from 'types/api';
+import { ILog } from 'types/api/logs/log';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+export const useContextLogData = ({
+ log,
+ query,
+ order,
+ isEdit,
+ filters,
+ page,
+ setPage,
+}: {
+ log: ILog;
+ query: Query;
+ order: string;
+ isEdit: boolean;
+ filters: TagFilter | null;
+ page: number;
+ setPage: Dispatch
+
+ );
+ },
+ },
{
title: 'Field',
dataIndex: 'field',
@@ -264,12 +337,34 @@ function TableView({
},
},
];
+ function sortPinnedAttributes(
+ data: Record {
+ togglePinAttribute(record);
+ }}
+ >
+
+
diff --git a/frontend/src/container/LogsExplorerList/styles.ts b/frontend/src/container/LogsExplorerList/styles.ts
index e9054bf3ef..8fbbf74733 100644
--- a/frontend/src/container/LogsExplorerList/styles.ts
+++ b/frontend/src/container/LogsExplorerList/styles.ts
@@ -1,6 +1,7 @@
import styled from 'styled-components';
export const InfinityWrapperStyled = styled.div`
+ flex: 1;
height: 40rem !important;
display: flex;
height: 100%;
diff --git a/frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss b/frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss
index 501ae4d0d3..47cbf28738 100644
--- a/frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss
+++ b/frontend/src/container/LogsExplorerViews/LogsExplorerViews.styles.scss
@@ -1,7 +1,15 @@
.logs-explorer-views-container {
margin-bottom: 24px;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
.logs-explorer-views-types {
+ width: -webkit-fill-available;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+
.views-tabs-container {
padding: 8px 16px;
border: 1px solid var(--text-slate-400);
@@ -85,6 +93,10 @@
}
.logs-explorer-views-type-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
.ant-card {
border: none !important;
}
diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx
index 49b5842908..c814ac8cb6 100644
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -3,6 +3,7 @@ import './LogsExplorerViews.styles.scss';
import { Button } from 'antd';
import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { LOCALSTORAGE } from 'constants/localStorage';
import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
import { QueryParams } from 'constants/query';
@@ -13,13 +14,15 @@ import {
PANEL_TYPES,
} from 'constants/queryBuilder';
import { DEFAULT_PER_PAGE_VALUE } from 'container/Controls/config';
-import ExplorerOptions from 'container/ExplorerOptions/ExplorerOptions';
+import Download from 'container/DownloadV2/DownloadV2';
+import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
import GoToTop from 'container/GoToTop';
import LogsExplorerChart from 'container/LogsExplorerChart';
import LogsExplorerList from 'container/LogsExplorerList';
import LogsExplorerTable from 'container/LogsExplorerTable';
import { useOptionsMenu } from 'container/OptionsMenu';
import TimeSeriesView from 'container/TimeSeriesView/TimeSeriesView';
+import dayjs from 'dayjs';
import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
import { addEmptyWidgetInDashboardJSONWithQuery } from 'hooks/dashboard/utils';
import { LogTimeRange } from 'hooks/logs/types';
@@ -32,8 +35,9 @@ import useClickOutside from 'hooks/useClickOutside';
import { useHandleExplorerTabChange } from 'hooks/useHandleExplorerTabChange';
import { useNotifications } from 'hooks/useNotifications';
import useUrlQueryData from 'hooks/useUrlQueryData';
+import { FlatLogData } from 'lib/logs/flatLogData';
import { getPaginationQueryData } from 'lib/newQueryBuilder/getPaginationQueryData';
-import { defaultTo, isEmpty } from 'lodash-es';
+import { defaultTo, isEmpty, omit } from 'lodash-es';
import { Sliders } from 'lucide-react';
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -189,13 +193,19 @@ function LogsExplorerViews({
data: listChartData,
isFetching: isFetchingListChartData,
isLoading: isLoadingListChartData,
- } = useGetExplorerQueryRange(listChartQuery, PANEL_TYPES.TIME_SERIES, {
- enabled: !!listChartQuery && panelType === PANEL_TYPES.LIST,
- });
+ } = useGetExplorerQueryRange(
+ listChartQuery,
+ PANEL_TYPES.TIME_SERIES,
+ DEFAULT_ENTITY_VERSION,
+ {
+ enabled: !!listChartQuery && panelType === PANEL_TYPES.LIST,
+ },
+ );
const { data, isLoading, isFetching, isError } = useGetExplorerQueryRange(
requestData,
panelType,
+ DEFAULT_ENTITY_VERSION,
{
keepPreviousData: true,
enabled: !isLimit && !!requestData,
@@ -516,6 +526,23 @@ function LogsExplorerViews({
},
});
+ const flattenLogData = useMemo(
+ () =>
+ logs.map((log) => {
+ const timestamp =
+ typeof log.timestamp === 'string'
+ ? dayjs(log.timestamp).format()
+ : dayjs(log.timestamp / 1e6).format();
+
+ return FlatLogData({
+ timestamp,
+ body: log.body,
+ ...omit(log, 'timestamp', 'body'),
+ });
+ }),
+ [logs],
+ );
+
return (
{showHistogram && (
@@ -571,6 +598,11 @@ function LogsExplorerViews({
{selectedPanelType === PANEL_TYPES.LIST && (
+
- tr >td {
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 18px;
- font-family: Inter;
- .ant-typography {
- background-color: transparent;
- color: var(--bg-vanilla-100);
- margin-bottom: 0;
- font-size: 13px;
- font-style: normal;
- font-weight: 400;
- line-height: 18px;
- font-family: Inter;
- }
- padding: 14px 8px;
- border: none;
- cursor: pointer;
- }
+ .resize-table {
+ height: calc(100% - 40px);
+ overflow: scroll;
+ overflow-x: hidden;
- .ant-table-wrapper .ant-table-header {
- border-bottom: 0.5px solid var(--bg-slate-400);
- }
+ &::-webkit-scrollbar {
+ width: 0.2rem;
+ height: 0.2rem;
+ }
- .ant-table-wrapper .ant-table-thead > tr > th {
- font-family: Inter;
- color: var(--bg-vanilla-100);
- background-color: transparent;
- border: none;
- font-size: 14px;
- font-style: normal;
- font-weight: 600;
- line-height: 22px;
- letter-spacing: 0.5px;
- padding: 8px;
- }
+ .ant-table-wrapper .ant-table-tbody > tr > td {
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px;
+ font-family: Inter;
+ .ant-typography {
+ background-color: transparent;
+ color: var(--bg-vanilla-100);
+ margin-bottom: 0;
+ font-size: 13px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 18px;
+ font-family: Inter;
+ }
+ padding: 14px 8px;
+ border: none;
+ cursor: pointer;
+ }
- .ant-table-wrapper .ant-table-thead > tr > th::before {
- display: none;
- }
- }
+ .ant-table-wrapper .ant-table-header {
+ border-bottom: 0.5px solid var(--bg-slate-400);
+ }
- .controller {
- position: absolute;
- bottom: 5px;
- right: 10px;
- }
+ .ant-table-wrapper .ant-table-thead > tr > th {
+ font-family: Inter;
+ color: var(--bg-vanilla-100);
+ background-color: transparent;
+ border: none;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 22px;
+ letter-spacing: 0.5px;
+ padding: 8px;
+ }
+
+ .ant-table-wrapper .ant-table-thead > tr > th::before {
+ display: none;
+ }
+ }
+
+ .controller {
+ display: flex;
+ align-items: center;
+ height: 40px;
+ justify-content: end;
+ padding: 0 8px;
+ }
}
.lightMode {
- .logs-table {
- .resize-table {
- .ant-table-wrapper .ant-table-tbody >tr >td {
- background-color: var(--bg-vanilla-100);
- .ant-typography {
- color: var(--bg-ink-500);
- }
- }
- .ant-table-wrapper .ant-table-thead > tr > th {
- background-color: var(--bg-vanilla-100);
- color: var(--bg-ink-500);
- }
+ .logs-table {
+ .resize-table {
+ .ant-table-wrapper .ant-table-tbody > tr > td {
+ background-color: var(--bg-vanilla-100);
+ .ant-typography {
+ color: var(--bg-ink-500);
+ }
+ }
+ .ant-table-wrapper .ant-table-thead > tr > th {
+ background-color: var(--bg-vanilla-100);
+ color: var(--bg-ink-500);
+ }
- .ant-table-wrapper .ant-table-header {
- border-bottom: 0.5px solid var(--bg-vanilla-400);
- }
- }
- }
-}
\ No newline at end of file
+ .ant-table-wrapper .ant-table-header {
+ border-bottom: 0.5px solid var(--bg-vanilla-400);
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
index 64be38c035..618f732595 100644
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@@ -4,6 +4,7 @@ import { Table } from 'antd';
import LogDetail from 'components/LogDetail';
import { VIEW_TYPES } from 'components/LogDetail/constants';
import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { OPERATORS, PANEL_TYPES } from 'constants/queryBuilder';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import Controls from 'container/Controls';
@@ -106,6 +107,7 @@ function LogsPanelComponent({
selectedTime: selectedTime?.enum || 'GLOBAL_TIME',
variables: getDashboardVariables(selectedDashboard?.data.variables),
},
+ DEFAULT_ENTITY_VERSION,
{
queryKey: [
REACT_QUERY_KEY.GET_QUERY_RANGE,
diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx
index c87d4232f6..b10c3503dd 100644
--- a/frontend/src/container/LogsTable/index.tsx
+++ b/frontend/src/container/LogsTable/index.tsx
@@ -74,6 +74,7 @@ function LogsTable(props: LogsTableProps): JSX.Element {
key={log.id}
logData={log}
selectedFields={selected}
+ linesPerRow={linesPerRow}
onAddToQuery={onAddToQuery}
onSetActiveLog={onSetActiveLog}
/>
diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts
index 2cec9e823b..91343b7b06 100644
--- a/frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts
+++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/DBCallQueries.ts
@@ -113,9 +113,13 @@ export const databaseCallsAvgDuration = ({
const disabled = [true, true];
const legendFormulas = ['Average Duration'];
const expressions = [FORMULA.DATABASE_CALLS_AVG_DURATION];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const dataSource = DataSource.METRICS;
@@ -126,7 +130,8 @@ export const databaseCallsAvgDuration = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts
index 3375d3920a..a2c87f0874 100644
--- a/frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts
+++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/ExternalQueries.ts
@@ -93,9 +93,13 @@ export const externalCallErrorPercent = ({
const additionalItems = [additionalItemsA, additionalItemsB];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const legends = [legend, legend];
const dataSource = DataSource.METRICS;
@@ -108,7 +112,8 @@ export const externalCallErrorPercent = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
@@ -152,9 +157,13 @@ export const externalCallDuration = ({
const additionalItems = [additionalItemsA, additionalItemsA];
const legends = [legend, legend];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const dataSource = DataSource.METRICS;
@@ -165,7 +174,8 @@ export const externalCallDuration = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
@@ -250,9 +260,13 @@ export const externalCallDurationByAddress = ({
const autocompleteData = [autocompleteDataA, autocompleteDataB];
const additionalItems = [additionalItemsA, additionalItemsA];
const legends = [legend, legend];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const dataSource = DataSource.METRICS;
@@ -264,7 +278,8 @@ export const externalCallDurationByAddress = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts
index efe00eec4d..71a16fcc07 100644
--- a/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts
+++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/MetricsPageQueriesFactory.ts
@@ -9,6 +9,7 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
import {
MetricAggregateOperator,
QueryBuilderData,
+ Temporality,
} from 'types/common/queryBuilder';
import {
@@ -48,7 +49,7 @@ export const getQueryBuilderQueries = ({
items: filterItems[index],
op: 'AND',
},
- reduceTo: 'sum',
+ reduceTo: 'avg',
dataSource,
};
@@ -69,7 +70,8 @@ export const getQueryBuilderQuerieswithFormula = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
}: BuilderQuerieswithFormulaProps): QueryBuilderData => ({
queryFormulas: expressions.map((expression, index) => ({
@@ -79,14 +81,16 @@ export const getQueryBuilderQuerieswithFormula = ({
})),
queryData: autocompleteData.map((_, index) => ({
...initialQueryBuilderFormValuesMap.metrics,
- aggregateOperator: aggregateOperators[index],
+ timeAggregation: timeAggregateOperators[index],
+ spaceAggregation: spaceAggregateOperators[index],
+ temporality: Temporality.Delta,
disabled: disabled[index],
groupBy,
legend: legends[index],
aggregateAttribute: autocompleteData[index],
queryName: alphabet[index],
expression: alphabet[index],
- reduceTo: 'sum',
+ reduceTo: 'avg',
filters: {
items: additionalItems[index],
op: 'AND',
diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts
index 3186931891..d27bfc01be 100644
--- a/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts
+++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/OverviewQueries.ts
@@ -250,11 +250,16 @@ export const apDexTracesQueryBuilderQueries = ({
const disabled = Array(3).fill(true);
const expressions = [FORMULA.APDEX_TRACES];
const legendFormulas = [GraphTitle.APDEX];
- const aggregateOperators = [
+ const timeAggregateOperators = [
MetricAggregateOperator.COUNT,
MetricAggregateOperator.COUNT,
MetricAggregateOperator.COUNT,
];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.EMPTY,
+ ];
const dataSource = DataSource.TRACES;
return getQueryBuilderQuerieswithFormula({
@@ -264,7 +269,8 @@ export const apDexTracesQueryBuilderQueries = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
@@ -433,10 +439,16 @@ export const apDexMetricsQueryBuilderQueries = ({
? [FORMULA.APDEX_DELTA_SPAN_METRICS]
: [FORMULA.APDEX_CUMULATIVE_SPAN_METRICS];
const legendFormulas = [GraphTitle.APDEX];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const dataSource = DataSource.METRICS;
@@ -447,7 +459,8 @@ export const apDexMetricsQueryBuilderQueries = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
@@ -593,9 +606,13 @@ export const errorPercentage = ({
const disabled = [true, true];
const expressions = [FORMULA.ERROR_PERCENTAGE];
const legendFormulas = [GraphTitle.ERROR_PERCENTAGE];
- const aggregateOperators = [
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const dataSource = DataSource.METRICS;
@@ -606,7 +623,8 @@ export const errorPercentage = ({
disabled,
expressions,
legendFormulas,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
dataSource,
});
};
diff --git a/frontend/src/container/MetricsApplication/MetricsPageQueries/TopOperationQueries.ts b/frontend/src/container/MetricsApplication/MetricsPageQueries/TopOperationQueries.ts
index 225e2084cd..18f0d07a88 100644
--- a/frontend/src/container/MetricsApplication/MetricsPageQueries/TopOperationQueries.ts
+++ b/frontend/src/container/MetricsApplication/MetricsPageQueries/TopOperationQueries.ts
@@ -118,13 +118,21 @@ export const topOperationQueries = ({
KeyOperationTableHeader.ERROR_RATE,
KeyOperationTableHeader.NUM_OF_CALLS,
];
- const aggregateOperators = [
- MetricAggregateOperator.HIST_QUANTILE_50,
- MetricAggregateOperator.HIST_QUANTILE_90,
- MetricAggregateOperator.HIST_QUANTILE_99,
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.P50,
+ MetricAggregateOperator.P90,
+ MetricAggregateOperator.P99,
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const expressions = ['D*100/E'];
const legendFormulas = [GraphTitle.ERROR_PERCENTAGE];
@@ -135,7 +143,8 @@ export const topOperationQueries = ({
additionalItems,
disabled,
legends,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
expressions,
legendFormulas,
dataSource,
diff --git a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
index 31ed0769bf..0d84d45136 100644
--- a/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/DBCall.tsx
@@ -1,4 +1,5 @@
import { Col } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import {
@@ -29,7 +30,9 @@ import {
} from './util';
function DBCall(): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+
+ const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState(0);
const { queries } = useResourceAttribute();
@@ -121,6 +124,7 @@ function DBCall(): JSX.Element {
'database_call_rps',
);
}}
+ version={ENTITY_VERSION_V4}
/>
@@ -156,6 +160,7 @@ function DBCall(): JSX.Element {
'database_call_avg_duration',
);
}}
+ version={ENTITY_VERSION_V4}
/>
diff --git a/frontend/src/container/MetricsApplication/Tabs/External.tsx b/frontend/src/container/MetricsApplication/Tabs/External.tsx
index 7748f8002a..707675ec1d 100644
--- a/frontend/src/container/MetricsApplication/Tabs/External.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/External.tsx
@@ -1,4 +1,5 @@
import { Col } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import {
@@ -31,7 +32,9 @@ import {
function External(): JSX.Element {
const [selectedTimeStamp, setSelectedTimeStamp] = useState(0);
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+
+ const servicename = decodeURIComponent(encodedServiceName);
const { queries } = useResourceAttribute();
const tagFilterItems = useMemo(
@@ -165,6 +168,7 @@ function External(): JSX.Element {
'external_call_error_percentage',
);
}}
+ version={ENTITY_VERSION_V4}
/>
@@ -201,6 +205,7 @@ function External(): JSX.Element {
'external_call_duration',
);
}}
+ version={ENTITY_VERSION_V4}
/>
@@ -238,6 +243,7 @@ function External(): JSX.Element {
'external_call_rps_by_address',
)
}
+ version={ENTITY_VERSION_V4}
/>
@@ -274,6 +280,7 @@ function External(): JSX.Element {
'external_call_duration_by_address',
);
}}
+ version={ENTITY_VERSION_V4}
/>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index 032c3c0cb8..1fde8d0919 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -52,7 +52,8 @@ function Application(): JSX.Element {
const { maxTime, minTime } = useSelector(
(state) => state.globalTime,
);
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const [selectedTimeStamp, setSelectedTimeStamp] = useState(0);
const { search, pathname } = useLocation();
const { queries } = useResourceAttribute();
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
index e3b03ac577..abfaf52d58 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetrics.tsx
@@ -5,6 +5,7 @@ import {
apDexToolTipUrl,
apDexToolTipUrlText,
} from 'constants/apDex';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import DisplayThreshold from 'container/GridCardLayout/WidgetHeader/DisplayThreshold';
@@ -31,7 +32,8 @@ function ApDexMetrics({
topLevelOperationsRoute,
handleGraphClick,
}: ApDexMetricsProps): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const apDexMetricsWidget = useMemo(
() =>
@@ -94,6 +96,7 @@ function ApDexMetrics({
onClickHandler={handleGraphClick('ApDex')}
threshold={threshold}
isQueryEnabled={isQueryEnabled}
+ version={ENTITY_VERSION_V4}
/>
);
}
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
index 3ee5fbf7d8..9241f82938 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexMetricsApplication.tsx
@@ -15,7 +15,9 @@ function ApDexMetricsApplication({
thresholdValue,
topLevelOperationsRoute,
}: ApDexDataSwitcherProps): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
+
const { data, isLoading, error } = useGetMetricMeta(metricMeta, servicename);
useErrorNotification(error);
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
index 1b2e5ba0cd..65ebe130a9 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/ApDexTraces.tsx
@@ -1,5 +1,6 @@
// This component is not been used in the application as we support only metrics for ApDex as of now.
// This component is been kept for future reference.
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
import { GraphTitle } from 'container/MetricsApplication/constant';
@@ -20,7 +21,8 @@ function ApDexTraces({
tagFilterItems,
thresholdValue,
}: ApDexDataSwitcherProps): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const apDexTracesWidget = useMemo(
() =>
@@ -54,6 +56,7 @@ function ApDexTraces({
onClickHandler={handleGraphClick('ApDex')}
threshold={thresholdValue}
isQueryEnabled={isQueryEnabled}
+ version={ENTITY_VERSION_V4}
/>
);
}
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
index d5e33435d8..140b6d1409 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ApDex/index.tsx
@@ -15,7 +15,9 @@ function ApDexApplication({
topLevelOperationsRoute,
tagFilterItems,
}: ApDexApplicationProps): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
+
const { data, isLoading, error, isRefetching } = useGetApDexSettings(
servicename,
);
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
index a6e0e756e1..cbf4dacc58 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { FeatureKeys } from 'constants/features';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Graph from 'container/GridCardLayout/GridCard';
@@ -29,7 +30,8 @@ function ServiceOverview({
topLevelOperationsRoute,
topLevelOperationsIsLoading,
}: ServiceOverviewProps): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const isSpanMetricEnable = useFeatureFlag(FeatureKeys.USE_SPAN_METRICS)
?.active;
@@ -93,6 +95,7 @@ function ServiceOverview({
onClickHandler={handleGraphClick('Service')}
isQueryEnabled={isQueryEnabled}
fillSpans={false}
+ version={ENTITY_VERSION_V4}
/>
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
index bf2df1656f..1b0903f4fa 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopLevelOperations.tsx
@@ -1,6 +1,7 @@
import { Typography } from 'antd';
import axios from 'axios';
import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import Graph from 'container/GridCardLayout/GridCard';
import { Card, GraphContainer } from 'container/MetricsApplication/styles';
import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -33,6 +34,7 @@ function TopLevelOperation({
onClickHandler={handleGraphClick(opName)}
onDragSelect={onDragSelect}
isQueryEnabled={!topLevelOperationsIsLoading}
+ version={ENTITY_VERSION_V4}
/>
)}
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
index d2124a7a1f..1b11d199cd 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperation.tsx
@@ -15,7 +15,11 @@ function TopOperation(): JSX.Element {
const { maxTime, minTime } = useSelector(
(state) => state.globalTime,
);
- const { servicename } = useParams<{ servicename?: string }>();
+ const { servicename: encodedServiceName } = useParams<{
+ servicename?: string;
+ }>();
+ const servicename = decodeURIComponent(encodedServiceName || '');
+
const { queries } = useResourceAttribute();
const selectedTags = useMemo(
() => (convertRawQueriesToTraceSelectedTags(queries) as Tags[]) || [],
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
index 20884ab02a..6b9ab4ee72 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/TopOperationMetrics.tsx
@@ -1,3 +1,4 @@
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { topOperationMetricsDownloadOptions } from 'container/MetricsApplication/constant';
import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
@@ -23,7 +24,8 @@ import ColumnWithLink from './TableRenderer/ColumnWithLink';
import { getTableColumnRenderer } from './TableRenderer/TableColumnRenderer';
function TopOperationMetrics(): JSX.Element {
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const { notifications } = useNotifications();
@@ -67,6 +69,7 @@ function TopOperationMetrics(): JSX.Element {
globalSelectedInterval,
variables: {},
},
+ ENTITY_VERSION_V4,
{
queryKey: [
`GetMetricsQueryRange-${keyOperationWidget?.timePreferance}-${globalSelectedInterval}-${keyOperationWidget?.id}`,
diff --git a/frontend/src/container/MetricsApplication/Tabs/types.ts b/frontend/src/container/MetricsApplication/Tabs/types.ts
index f30bf1b14e..9b45bd5492 100644
--- a/frontend/src/container/MetricsApplication/Tabs/types.ts
+++ b/frontend/src/container/MetricsApplication/Tabs/types.ts
@@ -39,7 +39,8 @@ export interface BuilderQuerieswithFormulaProps {
expressions: string[];
legendFormulas: string[];
additionalItems: TagFilterItem[][];
- aggregateOperators: MetricAggregateOperator[];
+ timeAggregateOperators: MetricAggregateOperator[];
+ spaceAggregateOperators: MetricAggregateOperator[];
dataSource: DataSource;
}
diff --git a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
index 107c9cb50b..3042db8958 100644
--- a/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
+++ b/frontend/src/container/MetricsApplication/TopOperationsTable.tsx
@@ -26,7 +26,9 @@ function TopOperationsTable({
isLoading,
}: TopOperationsTableProps): JSX.Element {
const searchInput = useRef(null);
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+
+ const servicename = decodeURIComponent(encodedServiceName);
const { minTime, maxTime } = useSelector(
(state) => state.globalTime,
);
@@ -39,7 +41,8 @@ function TopOperationsTable({
const params = useParams<{ servicename: string }>();
const handleOnClick = (operation: string): void => {
- const { servicename } = params;
+ const { servicename: encodedServiceName } = params;
+ const servicename = decodeURIComponent(encodedServiceName);
navigateToTrace({
servicename,
diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
index 80f1e745da..10adefa7c1 100644
--- a/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/index.tsx
@@ -2,12 +2,10 @@ import { SOMETHING_WENT_WRONG } from 'constants/api';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
-import { useIsDarkMode } from 'hooks/useDarkMode';
import { useNotifications } from 'hooks/useNotifications';
import createQueryParams from 'lib/createQueryParams';
import history from 'lib/history';
import { useDashboard } from 'providers/Dashboard/Dashboard';
-import { CSSProperties } from 'react';
import { LogsAggregatorOperator } from 'types/common/queryBuilder';
import { v4 as uuid } from 'uuid';
@@ -20,8 +18,6 @@ import menuItems from './menuItems';
import { Card, Container, Text } from './styles';
function DashboardGraphSlider(): JSX.Element {
- const isDarkMode = useIsDarkMode();
-
const {
handleToggleDashboardSlider,
layouts,
@@ -47,6 +43,7 @@ function DashboardGraphSlider(): JSX.Element {
description: data?.description || '',
name: data?.name || '',
tags: data?.tags || [],
+ version: data?.version || 'v3',
layout: [
{
i: id,
@@ -146,13 +143,11 @@ function DashboardGraphSlider(): JSX.Element {
);
};
- const fillColor: CSSProperties['color'] = isDarkMode ? 'white' : 'black';
-
return (
- {menuItems.map(({ name, Icon, display }) => (
+ {menuItems.map(({ name, icon, display }) => (
- {display}
))}
diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
deleted file mode 100644
index 3ea0268cdb..0000000000
--- a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import BarIcon from 'assets/Dashboard/BarIcon';
-import List from 'assets/Dashboard/List';
-import TableIcon from 'assets/Dashboard/Table';
-import TimeSeriesIcon from 'assets/Dashboard/TimeSeries';
-import ValueIcon from 'assets/Dashboard/Value';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { CSSProperties } from 'react';
-
-const Items: ItemsProps[] = [
- {
- name: PANEL_TYPES.TIME_SERIES,
- Icon: TimeSeriesIcon,
- display: 'Time Series',
- },
- {
- name: PANEL_TYPES.VALUE,
- Icon: ValueIcon,
- display: 'Value',
- },
- { name: PANEL_TYPES.TABLE, Icon: TableIcon, display: 'Table' },
- { name: PANEL_TYPES.LIST, Icon: List, display: 'List' },
- { name: PANEL_TYPES.BAR, Icon: BarIcon, display: 'Bar' },
-];
-
-interface ItemsProps {
- name: PANEL_TYPES;
- Icon: (props: IconProps) => JSX.Element;
- display: string;
-}
-
-interface IconProps {
- fillColor: CSSProperties['color'];
-}
-
-export default Items;
diff --git a/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx
new file mode 100644
index 0000000000..60f9203efc
--- /dev/null
+++ b/frontend/src/container/NewDashboard/ComponentsSlider/menuItems.tsx
@@ -0,0 +1,39 @@
+import { Color } from '@signozhq/design-tokens';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { BarChart3, LineChart, List, SigmaSquare, Table } from 'lucide-react';
+
+const Items: ItemsProps[] = [
+ {
+ name: PANEL_TYPES.TIME_SERIES,
+ icon:
,
+ display: 'Table',
+ },
+ {
+ name: PANEL_TYPES.LIST,
+ icon:
+ }
+ />
+
+
(false);
- const { t } = useTranslation('common');
const { user, role } = useSelector((state) => state.app);
const [editDashboard] = useComponentPermission(['edit_dashboard'], role);
@@ -48,7 +52,7 @@ function DashboardDescription(): JSX.Element {
};
return (
-
+
)}
-
-
+
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
index 8d67a8250b..f8ec103336 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/DashboardVariableSelection.tsx
@@ -1,5 +1,4 @@
import { Row } from 'antd';
-import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
import { useDashboard } from 'providers/Dashboard/Dashboard';
import { memo, useEffect, useState } from 'react';
import { IDashboardVariable } from 'types/api/dashboard/getAll';
@@ -11,12 +10,8 @@ function DashboardVariableSelection(): JSX.Element | null {
const {
selectedDashboard,
setSelectedDashboard,
- dashboardId,
- } = useDashboard();
-
- const {
updateLocalStorageDashboardVariables,
- } = useDashboardVariablesFromLocalStorage(dashboardId);
+ } = useDashboard();
const { data } = selectedDashboard || {};
diff --git a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
index 339210f956..9f54305b1e 100644
--- a/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
+++ b/frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.tsx
@@ -2,14 +2,13 @@ import './DashboardVariableSelection.styles.scss';
import { orange } from '@ant-design/colors';
import { WarningOutlined } from '@ant-design/icons';
-import { Input, Popover, Select, Tooltip, Typography } from 'antd';
+import { Input, Popover, Select, Typography } from 'antd';
import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import { commaValuesParser } from 'lib/dashbaordVariables/customCommaValuesParser';
import sortValues from 'lib/dashbaordVariables/sortVariableValues';
import { debounce } from 'lodash-es';
import map from 'lodash-es/map';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
import { memo, useEffect, useMemo, useState } from 'react';
import { useQuery } from 'react-query';
import { IDashboardVariable } from 'types/api/dashboard/getAll';
@@ -52,7 +51,6 @@ function VariableItem({
onValueUpdate,
lastUpdatedVar,
}: VariableItemProps): JSX.Element {
- const { isDashboardLocked } = useDashboard();
const [optionsData, setOptionsData] = useState<(string | number | boolean)[]>(
[],
);
@@ -222,84 +220,77 @@ function VariableItem({
}, [variableData.type, variableData.customValue]);
return (
-
-
-
- ${variableData.name}
-
-
- {variableData.type === 'TEXTBOX' ? (
-
+
+ ${variableData.name}
+
+
+ {variableData.type === 'TEXTBOX' ? (
+ {
+ debouncedHandleChange(e.target.value || '');
+ }}
+ style={{
+ width:
+ 50 + ((variableData.selectedValue?.toString()?.length || 0) * 7 || 50),
+ }}
+ />
+ ) : (
+ !errorMessage &&
+ optionsData && (
+
-
-
+ placeholder="Select value"
+ placement="bottomRight"
+ mode={mode}
+ dropdownMatchSelectWidth={false}
+ style={SelectItemStyle}
+ loading={isLoading}
+ showSearch
+ data-testid="variable-select"
+ className="variable-select"
+ getPopupContainer={popupContainer}
+ >
+ {enableSelectAll && (
+
+ ALL
+
+ )}
+ {map(optionsData, (option) => (
+
+ {option.toString()}
+
+ ))}
+
+ )
+ )}
+ {variableData.type !== 'TEXTBOX' && errorMessage && (
+
+ {errorMessage}}
+ >
+
+
+ )}
+
+
);
}
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 4c66c70b83..9dfd8d0deb 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -2,10 +2,13 @@ import './QuerySection.styles.scss';
import { Button, Tabs, Tooltip, Typography } from 'antd';
import TextToolTip from 'components/TextToolTip';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
+import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
import { WidgetGraphProps } from 'container/NewWidget/types';
import { QueryBuilder } from 'container/QueryBuilder';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
@@ -18,7 +21,7 @@ import {
getPreviousWidgets,
getSelectedWidgetIndex,
} from 'providers/Dashboard/util';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { Widgets } from 'types/api/dashboard/getAll';
@@ -36,6 +39,7 @@ function QuerySection({
}: QueryProps): JSX.Element {
const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
const urlQuery = useUrlQuery();
+ const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
const { minTime, maxTime } = useSelector(
(state) => state.globalTime,
@@ -47,10 +51,13 @@ function QuerySection({
const { selectedDashboard, setSelectedDashboard } = useDashboard();
- const getWidgetQueryRange = useGetWidgetQueryRange({
- graphType: selectedGraph,
- selectedTime: selectedTime.enum,
- });
+ const getWidgetQueryRange = useGetWidgetQueryRange(
+ {
+ graphType: selectedGraph,
+ selectedTime: selectedTime.enum,
+ },
+ selectedDashboard?.data?.version || DEFAULT_ENTITY_VERSION,
+ );
const { widgets } = selectedDashboard?.data || {};
@@ -149,6 +156,7 @@ function QuerySection({
Query Builder ,
children: (
- e.id === widgetId);
- const getWidgetQueryRange = useGetWidgetQueryRange({
- graphType: getGraphType(selectedGraph),
- selectedTime: selectedTime.enum,
- });
+ const getWidgetQueryRange = useGetWidgetQueryRange(
+ {
+ graphType: getGraphType(selectedGraph),
+ selectedTime: selectedTime.enum,
+ },
+ selectedDashboard?.data?.version || DEFAULT_ENTITY_VERSION,
+ );
if (getWidgetQueryRange.data && selectedGraph === PANEL_TYPES.BAR) {
const sortedSeriesData = getSortedSeriesData(
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
index 647b746c2d..aa7553af53 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/WidgetGraphs.tsx
@@ -133,6 +133,7 @@ function WidgetGraph({
softMax,
softMin,
panelType: selectedGraph,
+ currentQuery,
}),
[
widgetId,
@@ -148,6 +149,7 @@ function WidgetGraph({
softMax,
softMin,
selectedGraph,
+ currentQuery,
],
);
diff --git a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
index 14dcedad08..37cdae9d40 100644
--- a/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/WidgetGraph/index.tsx
@@ -1,4 +1,5 @@
import { InfoCircleOutlined } from '@ant-design/icons';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { Card } from 'container/GridCardLayout/styles';
import { useGetWidgetQueryRange } from 'hooks/queryBuilder/useGetWidgetQueryRange';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -34,10 +35,13 @@ function WidgetGraph({
const selectedWidget = widgets.find((e) => e.id === widgetId);
- const getWidgetQueryRange = useGetWidgetQueryRange({
- graphType: getGraphType(selectedGraph),
- selectedTime: selectedTime.enum,
- });
+ const getWidgetQueryRange = useGetWidgetQueryRange(
+ {
+ graphType: getGraphType(selectedGraph),
+ selectedTime: selectedTime.enum,
+ },
+ selectedDashboard?.data?.version || DEFAULT_ENTITY_VERSION,
+ );
if (selectedWidget === undefined) {
return Invalid widget ;
diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx
index f4c62ae601..9fbbf6e63c 100644
--- a/frontend/src/container/NewWidget/index.tsx
+++ b/frontend/src/container/NewWidget/index.tsx
@@ -5,7 +5,9 @@ import { SOMETHING_WENT_WRONG } from 'constants/api';
import { FeatureKeys } from 'constants/features';
import { PANEL_TYPES } from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
+import { DashboardShortcuts } from 'constants/shortcuts/DashboardShortcuts';
import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
+import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { MESSAGE, useIsFeatureDisabled } from 'hooks/useFeatureFlag';
import { useNotifications } from 'hooks/useNotifications';
@@ -18,7 +20,7 @@ import {
getPreviousWidgets,
getSelectedWidgetIndex,
} from 'providers/Dashboard/util';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { generatePath, useLocation, useParams } from 'react-router-dom';
@@ -53,6 +55,8 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
const { t } = useTranslation(['dashboard']);
+ const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+
const { currentQuery, stagedQuery } = useQueryBuilder();
const isQueryModified = useMemo(
@@ -311,6 +315,17 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
isNewTraceLogsAvailable,
]);
+ useEffect(() => {
+ registerShortcut(DashboardShortcuts.SaveChanges, onSaveDashboard);
+ registerShortcut(DashboardShortcuts.DiscardChanges, onClickDiscardHandler);
+
+ return (): void => {
+ deregisterShortcut(DashboardShortcuts.SaveChanges);
+ deregisterShortcut(DashboardShortcuts.DiscardChanges);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [onSaveDashboard]);
+
return (
@@ -414,7 +429,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element {
{t('your_graph_build_with')}{' '}
) : (
{t('dashboard_unsave_changes')}
diff --git a/frontend/src/container/NoLogs/NoLogs.tsx b/frontend/src/container/NoLogs/NoLogs.tsx
index 7745d130f3..d317da69ce 100644
--- a/frontend/src/container/NoLogs/NoLogs.tsx
+++ b/frontend/src/container/NoLogs/NoLogs.tsx
@@ -1,14 +1,34 @@
import './NoLogs.styles.scss';
import { Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
import { ArrowUpRight } from 'lucide-react';
import { DataSource } from 'types/common/queryBuilder';
+import { isCloudUser } from 'utils/app';
export default function NoLogs({
dataSource,
}: {
dataSource: DataSource;
}): JSX.Element {
+ const cloudUser = isCloudUser();
+ const handleLinkClick = (
+ e: React.MouseEvent,
+ ): void => {
+ e.preventDefault();
+ e.stopPropagation();
+
+ if (cloudUser) {
+ history.push(
+ dataSource === 'traces'
+ ? ROUTES.GET_STARTED_APPLICATION_MONITORING
+ : ROUTES.GET_STARTED_LOGS_MANAGEMENT,
+ );
+ } else {
+ window.open(`https://signoz.io/docs/userguide/${dataSource}/`, '_blank');
+ }
+ };
return (
+```
+- Replace `` with the name of the Kubernetes cluster or a unique identifier of the cluster.
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-instrumentApplication.md
new file mode 100644
index 0000000000..c9138e8a5c
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-instrumentApplication.md
@@ -0,0 +1,64 @@
+
+
+After setting up the Otel collector agent, follow the steps below to instrument your PHP Application
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
+
+
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-runApplication.md
new file mode 100644
index 0000000000..9fa8f823e2
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-runApplication.md
@@ -0,0 +1,16 @@
+### Set environment variables and run app
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME={MYAPP} \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT= \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Endpoint at which the collector is running. Ex. -> `http://localhost:4317`
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-instrumentApplication.md
new file mode 100644
index 0000000000..2b28b1ab8b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-instrumentApplication.md
@@ -0,0 +1,60 @@
+
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-runApplication.md
new file mode 100644
index 0000000000..587a1b4373
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-runApplication.md
@@ -0,0 +1,16 @@
+### Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME={{MYAPP}} \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+ OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token={{SIGNOZ_INGESTION_KEY}} \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Run command for your PHP application
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-installOtelCollector.md
new file mode 100644
index 0000000000..a659f36474
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-installOtelCollector.md
@@ -0,0 +1,96 @@
+## Setup OpenTelemetry Binary as an agent
+
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v0.79.0/otelcol-contrib_0.79.0_linux_amd64.tar.gz
+```
+
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_linux_amd64.tar.gz -C otelcol-contrib
+```
+
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+ otlp:
+ protocols:
+ grpc:
+ endpoint: 0.0.0.0:4317
+ http:
+ endpoint: 0.0.0.0:4318
+ hostmetrics:
+ collection_interval: 60s
+ scrapers:
+ cpu: {}
+ disk: {}
+ load: {}
+ filesystem: {}
+ memory: {}
+ network: {}
+ paging: {}
+ process:
+ mute_process_name_error: true
+ mute_process_exe_error: true
+ mute_process_io_error: true
+ processes: {}
+ prometheus:
+ config:
+ global:
+ scrape_interval: 60s
+ scrape_configs:
+ - job_name: otel-collector-binary
+ static_configs:
+ - targets:
+ # - localhost:8888
+processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+ resourcedetection:
+ detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+ # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+ timeout: 2s
+ system:
+ hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+ health_check: {}
+ zpages: {}
+exporters:
+ otlp:
+ endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+ tls:
+ insecure: false
+ headers:
+ "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+ logging:
+ verbosity: normal
+service:
+ telemetry:
+ metrics:
+ address: 0.0.0.0:8888
+ extensions: [health_check, zpages]
+ pipelines:
+ metrics:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ metrics/internal:
+ receivers: [prometheus, hostmetrics]
+ processors: [resourcedetection, batch]
+ exporters: [otlp]
+ traces:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ logs:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+```
+
+
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-instrumentApplication.md
new file mode 100644
index 0000000000..a59e7cd63e
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-instrumentApplication.md
@@ -0,0 +1,62 @@
+
+
+After setting up the Otel collector agent, follow the steps below to instrument your PHP Application
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-runApplication.md
new file mode 100644
index 0000000000..f69dd3b393
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-runApplication.md
@@ -0,0 +1,41 @@
+
+
+Once you are done instrumenting your PHP application, you can run it using the below commands
+
+
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+
+
+### Step 2: Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME= \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT= \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Endpoint at which the collector is running. Ex. -> `http://localhost:4317`
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-instrumentApplication.md
new file mode 100644
index 0000000000..2b28b1ab8b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-instrumentApplication.md
@@ -0,0 +1,60 @@
+
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-runApplication.md
new file mode 100644
index 0000000000..587a1b4373
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-runApplication.md
@@ -0,0 +1,16 @@
+### Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME={{MYAPP}} \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+ OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token={{SIGNOZ_INGESTION_KEY}} \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Run command for your PHP application
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-installOtelCollector.md
new file mode 100644
index 0000000000..cbabb8077b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-installOtelCollector.md
@@ -0,0 +1,96 @@
+## Setup OpenTelemetry Binary as an agent
+
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v0.79.0/otelcol-contrib_0.79.0_linux_arm64.tar.gz
+```
+
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_linux_arm64.tar.gz -C otelcol-contrib
+```
+
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+ otlp:
+ protocols:
+ grpc:
+ endpoint: 0.0.0.0:4317
+ http:
+ endpoint: 0.0.0.0:4318
+ hostmetrics:
+ collection_interval: 60s
+ scrapers:
+ cpu: {}
+ disk: {}
+ load: {}
+ filesystem: {}
+ memory: {}
+ network: {}
+ paging: {}
+ process:
+ mute_process_name_error: true
+ mute_process_exe_error: true
+ mute_process_io_error: true
+ processes: {}
+ prometheus:
+ config:
+ global:
+ scrape_interval: 60s
+ scrape_configs:
+ - job_name: otel-collector-binary
+ static_configs:
+ - targets:
+ # - localhost:8888
+processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+ resourcedetection:
+ detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+ # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+ timeout: 2s
+ system:
+ hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+ health_check: {}
+ zpages: {}
+exporters:
+ otlp:
+ endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+ tls:
+ insecure: false
+ headers:
+ "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+ logging:
+ verbosity: normal
+service:
+ telemetry:
+ metrics:
+ address: 0.0.0.0:8888
+ extensions: [health_check, zpages]
+ pipelines:
+ metrics:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ metrics/internal:
+ receivers: [prometheus, hostmetrics]
+ processors: [resourcedetection, batch]
+ exporters: [otlp]
+ traces:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ logs:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+```
+
+
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-instrumentApplication.md
new file mode 100644
index 0000000000..a59e7cd63e
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-instrumentApplication.md
@@ -0,0 +1,62 @@
+
+
+After setting up the Otel collector agent, follow the steps below to instrument your PHP Application
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-runApplication.md
new file mode 100644
index 0000000000..a11e47198f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-runApplication.md
@@ -0,0 +1,41 @@
+
+
+Once you are done instrumenting your Rust application, you can run it using the below commands
+
+
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+
+
+### Step 2: Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME= \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT= \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Endpoint at which the collector is running. Ex. -> `http://localhost:4317`
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-instrumentApplication.md
new file mode 100644
index 0000000000..2b28b1ab8b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-instrumentApplication.md
@@ -0,0 +1,60 @@
+
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-runApplication.md
new file mode 100644
index 0000000000..7b61210f9d
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-runApplication.md
@@ -0,0 +1,16 @@
+### Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME={{MYAPP}} \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+ OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token={{SIGNOZ_INGESTION_KEY}} \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-installOtelCollector.md
new file mode 100644
index 0000000000..843e86a411
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-installOtelCollector.md
@@ -0,0 +1,96 @@
+### Setup OpenTelemetry Binary as an agent
+
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v0.79.0/otelcol-contrib_0.79.0_darwin_amd64.tar.gz
+```
+
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_darwin_amd64.tar.gz -C otelcol-contrib
+```
+
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+ otlp:
+ protocols:
+ grpc:
+ endpoint: 0.0.0.0:4317
+ http:
+ endpoint: 0.0.0.0:4318
+ hostmetrics:
+ collection_interval: 60s
+ scrapers:
+ cpu: {}
+ disk: {}
+ load: {}
+ filesystem: {}
+ memory: {}
+ network: {}
+ paging: {}
+ process:
+ mute_process_name_error: true
+ mute_process_exe_error: true
+ mute_process_io_error: true
+ processes: {}
+ prometheus:
+ config:
+ global:
+ scrape_interval: 60s
+ scrape_configs:
+ - job_name: otel-collector-binary
+ static_configs:
+ - targets:
+ # - localhost:8888
+processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+ resourcedetection:
+ detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+ # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+ timeout: 2s
+ system:
+ hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+ health_check: {}
+ zpages: {}
+exporters:
+ otlp:
+ endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+ tls:
+ insecure: false
+ headers:
+ "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+ logging:
+ verbosity: normal
+service:
+ telemetry:
+ metrics:
+ address: 0.0.0.0:8888
+ extensions: [health_check, zpages]
+ pipelines:
+ metrics:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ metrics/internal:
+ receivers: [prometheus, hostmetrics]
+ processors: [resourcedetection, batch]
+ exporters: [otlp]
+ traces:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ logs:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+```
+
+
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-instrumentApplication.md
new file mode 100644
index 0000000000..a59e7cd63e
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-instrumentApplication.md
@@ -0,0 +1,62 @@
+
+
+After setting up the Otel collector agent, follow the steps below to instrument your PHP Application
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-runApplication.md
new file mode 100644
index 0000000000..a11e47198f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-runApplication.md
@@ -0,0 +1,41 @@
+
+
+Once you are done instrumenting your Rust application, you can run it using the below commands
+
+
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+
+
+### Step 2: Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME= \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT= \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Endpoint at which the collector is running. Ex. -> `http://localhost:4317`
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-instrumentApplication.md
new file mode 100644
index 0000000000..2b28b1ab8b
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-instrumentApplication.md
@@ -0,0 +1,60 @@
+
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-runApplication.md
new file mode 100644
index 0000000000..587a1b4373
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-runApplication.md
@@ -0,0 +1,16 @@
+### Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME={{MYAPP}} \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT=https://ingest.{{REGION}}.signoz.cloud:443 \
+ OTEL_EXPORTER_OTLP_HEADERS=signoz-access-token={{SIGNOZ_INGESTION_KEY}} \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Run command for your PHP application
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-installOtelCollector.md
new file mode 100644
index 0000000000..3a780bb8de
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-installOtelCollector.md
@@ -0,0 +1,96 @@
+## Setup OpenTelemetry Binary as an agent
+
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v0.79.0/otelcol-contrib_0.79.0_darwin_arm64.tar.gz
+```
+
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_0.79.0_darwin_arm64.tar.gz -C otelcol-contrib
+```
+
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+ otlp:
+ protocols:
+ grpc:
+ endpoint: 0.0.0.0:4317
+ http:
+ endpoint: 0.0.0.0:4318
+ hostmetrics:
+ collection_interval: 60s
+ scrapers:
+ cpu: {}
+ disk: {}
+ load: {}
+ filesystem: {}
+ memory: {}
+ network: {}
+ paging: {}
+ process:
+ mute_process_name_error: true
+ mute_process_exe_error: true
+ mute_process_io_error: true
+ processes: {}
+ prometheus:
+ config:
+ global:
+ scrape_interval: 60s
+ scrape_configs:
+ - job_name: otel-collector-binary
+ static_configs:
+ - targets:
+ # - localhost:8888
+processors:
+ batch:
+ send_batch_size: 1000
+ timeout: 10s
+ # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+ resourcedetection:
+ detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+ # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+ timeout: 2s
+ system:
+ hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+ health_check: {}
+ zpages: {}
+exporters:
+ otlp:
+ endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+ tls:
+ insecure: false
+ headers:
+ "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+ logging:
+ verbosity: normal
+service:
+ telemetry:
+ metrics:
+ address: 0.0.0.0:8888
+ extensions: [health_check, zpages]
+ pipelines:
+ metrics:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ metrics/internal:
+ receivers: [prometheus, hostmetrics]
+ processors: [resourcedetection, batch]
+ exporters: [otlp]
+ traces:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+ logs:
+ receivers: [otlp]
+ processors: [batch]
+ exporters: [otlp]
+```
+
+
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-instrumentApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-instrumentApplication.md
new file mode 100644
index 0000000000..a59e7cd63e
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-instrumentApplication.md
@@ -0,0 +1,62 @@
+
+
+After setting up the Otel collector agent, follow the steps below to instrument your PHP Application
+
+### Step 1: Setup Development Environment
+Add these crates just below the `[dependencies]` section of your `cargo.toml` file
+
+To configure our PHP application to send data, you need to use OpenTelemetry PHP extension. Since the extension is built from the source, you need to have the build tools, which can be installed using the following command:
+
+**Linux**:
+```bash
+sudo apt-get install gcc make autoconf
+```
+
+**MacOs(Homebrew)**:
+```bash
+brew install gcc make autoconf
+```
+
+
+
+### Step 2: Build the extension
+
+With our environment set up we can install the extension using [PECL](https://pecl.php.net/):
+
+```bash
+pecl install opentelemetry
+```
+
+After successfully installing the OpenTelemetry extension, add the extension to php.ini file of your project:
+
+```bash
+[opentelemetry]
+extension=opentelemetry.so
+```
+
+Verify that the extension is enabled by running:
+
+```bash
+php -m | grep opentelemetry
+```
+
+Running the above command will **output**:
+
+```bash
+opentelemetry
+```
+
+
+
+### Step 3: Add the dependencies
+
+Add dependencies required to perform automatic instrumentation using this command :
+
+```bash
+composer config allow-plugins.php-http/discovery false
+composer require \
+ open-telemetry/sdk \
+ open-telemetry/exporter-otlp \
+ php-http/guzzle7-adapter \
+ open-telemetry/transport-grpc
+```
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-runApplication.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-runApplication.md
new file mode 100644
index 0000000000..a11e47198f
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-runApplication.md
@@ -0,0 +1,41 @@
+
+
+Once you are done instrumenting your Rust application, you can run it using the below commands
+
+
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+
+
+### Step 2: Running your PHP application
+
+We will pass environment variables at the runtime:
+
+```bash
+env OTEL_PHP_AUTOLOAD_ENABLED=true \
+ OTEL_SERVICE_NAME= \
+ OTEL_TRACES_EXPORTER=otlp \
+ OTEL_EXPORTER_OTLP_PROTOCOL=http/protobuf \
+ OTEL_EXPORTER_OTLP_ENDPOINT= \
+ OTEL_PROPAGATORS=baggage,tracecontext \
+
+```
+
+- - Endpoint at which the collector is running. Ex. -> `http://localhost:4317`
+- - Run command for your PHP application
\ No newline at end of file
diff --git a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
index ae294e2fb8..68e8f0edce 100644
--- a/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
+++ b/frontend/src/container/OnboardingContainer/OnboardingContainer.tsx
@@ -6,9 +6,11 @@ import { ArrowRightOutlined } from '@ant-design/icons';
import { Button, Card, Typography } from 'antd';
import getIngestionData from 'api/settings/getIngestionData';
import cx from 'classnames';
+import ROUTES from 'constants/routes';
import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
import useAnalytics from 'hooks/analytics/useAnalytics';
import { useIsDarkMode } from 'hooks/useDarkMode';
+import history from 'lib/history';
import { useEffect, useState } from 'react';
import { useQuery } from 'react-query';
import { useEffectOnce } from 'react-use';
@@ -21,9 +23,11 @@ import {
} from './context/OnboardingContext';
import { DataSourceType } from './Steps/DataSource/DataSource';
import {
+ defaultApplicationDataSource,
defaultAwsServices,
defaultInfraMetricsType,
defaultLogsType,
+ moduleRouteMap,
} from './utils/dataSourceUtils';
import {
APM_STEPS,
@@ -89,6 +93,7 @@ export default function Onboarding(): JSX.Element {
const [current, setCurrent] = useState(0);
const isDarkMode = useIsDarkMode();
const { trackEvent } = useAnalytics();
+ const { location } = history;
const {
selectedDataSource,
@@ -191,12 +196,16 @@ export default function Onboarding(): JSX.Element {
}
} else if (selectedModule?.id === ModulesMap.APM) {
handleAPMSteps();
+
+ if (!selectedDataSource) {
+ updateSelectedDataSource(defaultApplicationDataSource);
+ }
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedModule, selectedDataSource, selectedEnvironment, selectedMethod]);
- const handleNext = (): void => {
+ const handleNextStep = (): void => {
if (activeStep <= 3) {
const nextStep = activeStep + 1;
@@ -217,12 +226,36 @@ export default function Onboarding(): JSX.Element {
}
};
+ const handleNext = (): void => {
+ if (activeStep <= 3) {
+ handleNextStep();
+ history.replace(moduleRouteMap[selectedModule.id as ModulesMap]);
+ }
+ };
+
const handleModuleSelect = (module: ModuleProps): void => {
setSelectedModule(module);
updateSelectedModule(module);
updateSelectedDataSource(null);
};
+ useEffect(() => {
+ if (location.pathname === ROUTES.GET_STARTED_APPLICATION_MONITORING) {
+ handleModuleSelect(useCases.APM);
+ updateSelectedDataSource(defaultApplicationDataSource);
+ handleNextStep();
+ } else if (
+ location.pathname === ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING
+ ) {
+ handleModuleSelect(useCases.InfrastructureMonitoring);
+ handleNextStep();
+ } else if (location.pathname === ROUTES.GET_STARTED_LOGS_MANAGEMENT) {
+ handleModuleSelect(useCases.LogsManagement);
+ handleNextStep();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
return (
{!isDashboardLocked && editDashboard && (
+ }
+ />
+
+
{(isAuthor || role === USER_ROLES.ADMIN) && (
:
)}
-
+
@@ -21,11 +41,7 @@ export default function NoLogs({
-
+
Sending {dataSource} to SigNoz
diff --git a/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-installOtelCollector.md b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-installOtelCollector.md
new file mode 100644
index 0000000000..946b7fbdbf
--- /dev/null
+++ b/frontend/src/container/OnboardingContainer/Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-installOtelCollector.md
@@ -0,0 +1,24 @@
+## Install otel-collector in your Kubernetes infra
+
+
+Add the SigNoz Helm Chart repository
+```bash
+helm repo add signoz https://charts.signoz.io
+```
+
+
+If the chart is already present, update the chart to the latest using:
+```bash
+helm repo update
+```
+
+
+Install the Kubernetes Infrastructure chart provided by SigNoz
+```bash
+helm install my-release signoz/k8s-infra \
+--set otelCollectorEndpoint=ingest.{{REGION}}.signoz.cloud:443 \
+--set otelInsecure=false \
+--set signozApiKey={{SIGNOZ_INGESTION_KEY}} \
+--set global.clusterName=
{activeStep === 1 && (
@@ -285,6 +318,7 @@ export default function Onboarding(): JSX.Element {
setActiveStep(activeStep - 1);
setSelectedModule(useCases.APM);
resetProgress();
+ history.push(ROUTES.GET_STARTED);
}}
selectedModule={selectedModule}
selectedModuleSteps={selectedModuleSteps}
diff --git a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx b/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx
index b7ebbcfde8..3654b21fd7 100644
--- a/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx
+++ b/frontend/src/container/OnboardingContainer/Steps/LogsConnectionStatus/LogsConnectionStatus.tsx
@@ -5,6 +5,7 @@ import {
CloseCircleTwoTone,
LoadingOutlined,
} from '@ant-design/icons';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { PANEL_TYPES } from 'constants/queryBuilder';
import Header from 'container/OnboardingContainer/common/Header/Header';
import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
@@ -72,6 +73,9 @@ export default function LogsConnectionStatus(): JSX.Element {
reduceTo: 'sum',
offset: 0,
pageSize: 100,
+ timeAggregation: '',
+ spaceAggregation: '',
+ functions: [],
},
],
queryFormulas: [],
@@ -84,6 +88,7 @@ export default function LogsConnectionStatus(): JSX.Element {
const { data, isFetching, error, isError } = useGetExplorerQueryRange(
requestData,
PANEL_TYPES.LIST,
+ DEFAULT_ENTITY_VERSION,
{
keepPreviousData: true,
refetchInterval: pollingInterval,
diff --git a/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts b/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts
index 7bf505f30d..485a33382c 100644
--- a/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts
+++ b/frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts
@@ -403,6 +403,38 @@ import APM_javascript_reactjs_macOsARM64_quickStart_runApplication from '../Modu
import APM_javascript_reactjs_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md';
import APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md';
import APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md';
+// PHP-Kubernetes
+import APM_php_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-installOtelCollector.md';
+import APM_php_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-instrumentApplication.md';
+import APM_php_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Php/md-docs/Kubernetes/php-kubernetes-runApplication.md';
+// PHP-LinuxAMD64-quickstart
+import APM_php_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-instrumentApplication.md';
+import APM_php_linuxAMD64_quickStart_runApplication from '../Modules/APM/Php/md-docs/LinuxAMD64/QuickStart/php-linuxamd64-quickStart-runApplication.md';
+// PHP-LinuxAMD64-recommended
+import APM_php_linuxAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-installOtelCollector.md';
+import APM_php_linuxAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-instrumentApplication.md';
+import APM_php_linuxAMD64_recommendedSteps_runApplication from '../Modules/APM/Php/md-docs/LinuxAMD64/Recommended/php-linuxamd64-recommended-runApplication.md';
+// PHP-LinuxARM64-quickstart
+import APM_php_linuxARM64_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-instrumentApplication.md';
+import APM_php_linuxARM64_quickStart_runApplication from '../Modules/APM/Php/md-docs/LinuxARM64/QuickStart/php-linuxarm64-quickStart-runApplication.md';
+// PHP-LinuxARM64-recommended
+import APM_php_linuxARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-installOtelCollector.md';
+import APM_php_linuxARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-instrumentApplication.md';
+import APM_php_linuxARM64_recommendedSteps_runApplication from '../Modules/APM/Php/md-docs/LinuxARM64/Recommended/php-linuxarm64-recommended-runApplication.md';
+// PHP-MacOsAMD64-quickstart
+import APM_php_macOsAMD64_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-instrumentApplication.md';
+import APM_php_macOsAMD64_quickStart_runApplication from '../Modules/APM/Php/md-docs/MacOsAMD64/QuickStart/php-macosamd64-quickStart-runApplication.md';
+// PHP-MacOsAMD64-recommended
+import APM_php_macOsAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-installOtelCollector.md';
+import APM_php_macOsAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-instrumentApplication.md';
+import APM_php_macOsAMD64_recommendedSteps_runApplication from '../Modules/APM/Php/md-docs/MacOsAMD64/Recommended/php-macosamd64-recommended-runApplication.md';
+// PHP-MacOsARM64-quickstart
+import APM_php_macOsARM64_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-instrumentApplication.md';
+import APM_php_macOsARM64_quickStart_runApplication from '../Modules/APM/Php/md-docs/MacOsARM64/QuickStart/php-macosarm64-quickStart-runApplication.md';
+// PHP-MacOsARM64-recommended
+import APM_php_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-installOtelCollector.md';
+import APM_php_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-instrumentApplication.md';
+import APM_php_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Php/md-docs/MacOsARM64/Recommended/php-macosarm64-recommended-runApplication.md';
/// ////// Javascript Done
/// ///// Python Start
// Django
@@ -575,7 +607,6 @@ import APM_python_other_macOsARM64_recommendedSteps_setupOtelCollector from '../
import APM_python_other_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Python/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-instrumentApplication.md';
import APM_python_other_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Python/md-docs/Others/MacOsARM64/Recommended/others-macosarm64-recommended-runApplication.md';
// ----------------------------------------------------------------------------
-/// ////// Go Done
/// ///// ROR Start
// ROR-Kubernetes
import APM_rails_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/RubyOnRails/md-docs/Kubernetes/ror-kubernetes-installOtelCollector.md';
@@ -1546,4 +1577,36 @@ export const ApmDocFilePaths = {
APM_swift_macOsARM64_recommendedSteps_setupOtelCollector,
APM_swift_macOsARM64_recommendedSteps_instrumentApplication,
APM_swift_macOsARM64_recommendedSteps_runApplication,
+
+ APM_php_kubernetes_recommendedSteps_setupOtelCollector,
+ APM_php_kubernetes_recommendedSteps_instrumentApplication,
+ APM_php_kubernetes_recommendedSteps_runApplication,
+
+ APM_php_linuxAMD64_quickStart_instrumentApplication,
+ APM_php_linuxAMD64_quickStart_runApplication,
+
+ APM_php_linuxAMD64_recommendedSteps_setupOtelCollector,
+ APM_php_linuxAMD64_recommendedSteps_instrumentApplication,
+ APM_php_linuxAMD64_recommendedSteps_runApplication,
+
+ APM_php_linuxARM64_quickStart_instrumentApplication,
+ APM_php_linuxARM64_quickStart_runApplication,
+
+ APM_php_linuxARM64_recommendedSteps_setupOtelCollector,
+ APM_php_linuxARM64_recommendedSteps_instrumentApplication,
+ APM_php_linuxARM64_recommendedSteps_runApplication,
+
+ APM_php_macOsAMD64_quickStart_instrumentApplication,
+ APM_php_macOsAMD64_quickStart_runApplication,
+
+ APM_php_macOsAMD64_recommendedSteps_setupOtelCollector,
+ APM_php_macOsAMD64_recommendedSteps_instrumentApplication,
+ APM_php_macOsAMD64_recommendedSteps_runApplication,
+
+ APM_php_macOsARM64_quickStart_instrumentApplication,
+ APM_php_macOsARM64_quickStart_runApplication,
+
+ APM_php_macOsARM64_recommendedSteps_setupOtelCollector,
+ APM_php_macOsARM64_recommendedSteps_instrumentApplication,
+ APM_php_macOsARM64_recommendedSteps_runApplication,
};
diff --git a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts
index 7b851feac9..517cc38171 100644
--- a/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts
+++ b/frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts
@@ -1,6 +1,15 @@
-import { ModuleProps, ModulesMap } from '../OnboardingContainer';
+import ROUTES from 'constants/routes';
+
+import { ModuleProps } from '../OnboardingContainer';
import { DataSourceType } from '../Steps/DataSource/DataSource';
+export enum ModulesMap {
+ APM = 'APM',
+ LogsManagement = 'LogsManagement',
+ InfrastructureMonitoring = 'InfrastructureMonitoring',
+ AwsMonitoring = 'AwsMonitoring',
+}
+
export const frameworksMap = {
APM: {
java: [
@@ -81,174 +90,179 @@ const supportedLanguages = [
{
name: 'java',
id: 'java',
- imgURL: `Logos/java.png`,
+ imgURL: `/Logos/java.png`,
},
{
name: 'python',
id: 'python',
- imgURL: `Logos/python.png`,
+ imgURL: `/Logos/python.png`,
},
{
name: 'go',
id: 'go',
- imgURL: `Logos/go.png`,
+ imgURL: `/Logos/go.png`,
},
{
name: 'javascript',
id: 'javascript',
- imgURL: `Logos/javascript.png`,
+ imgURL: `/Logos/javascript.png`,
},
{
name: 'rails',
id: 'rails',
- imgURL: `Logos/rails.png`,
+ imgURL: `/Logos/rails.png`,
},
{
name: '.NET',
id: 'dotnet',
- imgURL: `Logos/dotnet.png`,
+ imgURL: `/Logos/dotnet.png`,
},
{
name: 'rust',
id: 'rust',
- imgURL: `Logos/rust.png`,
+ imgURL: `/Logos/rust.png`,
},
{
name: 'elixir',
id: 'elixir',
- imgURL: `Logos/elixir.png`,
+ imgURL: `/Logos/elixir.png`,
},
{
name: 'swift',
id: 'swift',
- imgURL: `Logos/swift.png`,
+ imgURL: `/Logos/swift.png`,
+ },
+ {
+ name: 'php',
+ id: 'php',
+ imgURL: `/Logos/php.png`,
},
];
export const defaultLogsType = {
name: 'Kubernetes Pod Logs',
id: 'kubernetes',
- imgURL: `Logos/kubernetes.svg`,
+ imgURL: `/Logos/kubernetes.svg`,
};
const supportedLogsTypes = [
{
name: 'Kubernetes Pod Logs',
id: 'kubernetes',
- imgURL: `Logos/kubernetes.svg`,
+ imgURL: `/Logos/kubernetes.svg`,
},
{
name: 'Docker Container Logs',
id: 'docker',
- imgURL: `Logos/docker.svg`,
+ imgURL: `/Logos/docker.svg`,
},
{
name: 'SysLogs',
id: 'syslogs',
- imgURL: `Logos/syslogs.svg`,
+ imgURL: `/Logos/syslogs.svg`,
},
{
name: 'Application Logs',
id: 'application_logs',
- imgURL: `Logos/software-window.svg`,
+ imgURL: `/Logos/software-window.svg`,
},
{
name: 'FluentBit',
id: 'fluentBit',
- imgURL: `Logos/fluent-bit.png`,
+ imgURL: `/Logos/fluent-bit.png`,
},
{
name: 'FluentD',
id: 'fluentD',
- imgURL: `Logos/fluentd.png`,
+ imgURL: `/Logos/fluentd.png`,
},
{
name: 'LogStash',
id: 'logStash',
- imgURL: `Logos/logstash.svg`,
+ imgURL: `/Logos/logstash.svg`,
},
{
name: 'Heroku',
id: 'heroku',
- imgURL: `Logos/heroku.png`,
+ imgURL: `/Logos/heroku.png`,
},
{
name: 'Vercel',
id: 'vercel',
- imgURL: `Logos/vercel.png`,
+ imgURL: `/Logos/vercel.png`,
},
{
name: 'HTTP',
id: 'http',
- imgURL: `Logos/http.png`,
+ imgURL: `/Logos/http.png`,
},
{
name: 'Cloudwatch',
id: 'cloudwatch',
- imgURL: `Logos/cloudwatch.png`,
+ imgURL: `/Logos/cloudwatch.png`,
},
];
export const defaultInfraMetricsType = {
name: 'Kubernetes Infra Metrics',
id: 'kubernetesInfraMetrics',
- imgURL: `Logos/kubernetes.svg`,
+ imgURL: `/Logos/kubernetes.svg`,
};
const supportedInfraMetrics = [
{
name: 'Kubernetes Infra Metrics',
id: 'kubernetesInfraMetrics',
- imgURL: `Logos/kubernetes.svg`,
+ imgURL: `/Logos/kubernetes.svg`,
},
{
name: 'HostMetrics',
id: 'hostMetrics',
- imgURL: `Logos/software-window.svg`,
+ imgURL: `/Logos/software-window.svg`,
},
{
name: 'Other Metrics',
id: 'otherMetrics',
- imgURL: `Logos/cmd-terminal.svg`,
+ imgURL: `/Logos/cmd-terminal.svg`,
},
];
export const defaultAwsServices = {
- name: 'EC2 - Application Logs',
+ name: 'EC2 - App/Server Logs',
id: 'awsEc2ApplicationLogs',
- imgURL: `Logos/ec2.svg`,
+ imgURL: `/Logos/ec2.svg`,
};
const supportedAwsServices = [
{
name: 'EC2 - App/Server Logs',
id: 'awsEc2ApplicationLogs',
- imgURL: `Logos/ec2.svg`,
+ imgURL: `/Logos/ec2.svg`,
},
{
name: 'EC2 - Infra Metrics',
id: 'awsEc2InfrastructureMetrics',
- imgURL: `Logos/ec2.svg`,
+ imgURL: `/Logos/ec2.svg`,
},
{
name: 'ECS - EC2',
id: 'awsEcsEc2',
- imgURL: `Logos/ecs.svg`,
+ imgURL: `/Logos/ecs.svg`,
},
{
name: 'ECS - Fargate',
id: 'awsEcsFargate',
- imgURL: `Logos/ecs.svg`,
+ imgURL: `/Logos/ecs.svg`,
},
{
name: 'ECS - External',
id: 'awsEcsExternal',
- imgURL: `Logos/ecs.svg`,
+ imgURL: `/Logos/ecs.svg`,
},
{
name: 'EKS',
id: 'awsEks',
- imgURL: `Logos/eks.svg`,
+ imgURL: `/Logos/eks.svg`,
},
];
@@ -284,7 +298,8 @@ export const getSupportedFrameworks = ({
(moduleID === ModulesMap.APM && dataSourceName === '.NET') ||
(moduleID === ModulesMap.APM && dataSourceName === 'rust') ||
(moduleID === ModulesMap.APM && dataSourceName === 'elixir') ||
- (moduleID === ModulesMap.APM && dataSourceName === 'swift')
+ (moduleID === ModulesMap.APM && dataSourceName === 'swift') ||
+ (moduleID === ModulesMap.APM && dataSourceName === 'php')
) {
return [];
}
@@ -313,10 +328,19 @@ export const hasFrameworks = ({
(moduleID === ModulesMap.APM && dataSourceName === '.NET') ||
(moduleID === ModulesMap.APM && dataSourceName === 'rust') ||
(moduleID === ModulesMap.APM && dataSourceName === 'elixir') ||
- (moduleID === ModulesMap.APM && dataSourceName === 'swift')
+ (moduleID === ModulesMap.APM && dataSourceName === 'swift') ||
+ (moduleID === ModulesMap.APM && dataSourceName === 'php')
) {
return false;
}
return true;
};
+
+export const moduleRouteMap = {
+ [ModulesMap.APM]: ROUTES.GET_STARTED_APPLICATION_MONITORING,
+ [ModulesMap.LogsManagement]: ROUTES.GET_STARTED_LOGS_MANAGEMENT,
+ [ModulesMap.InfrastructureMonitoring]:
+ ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
+ [ModulesMap.AwsMonitoring]: ROUTES.GET_STARTED_AWS_MONITORING,
+};
diff --git a/frontend/src/container/OptionsMenu/constants.ts b/frontend/src/container/OptionsMenu/constants.ts
index b1e5463686..2db02f85b8 100644
--- a/frontend/src/container/OptionsMenu/constants.ts
+++ b/frontend/src/container/OptionsMenu/constants.ts
@@ -1,3 +1,5 @@
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
import { OptionsQuery } from './types';
export const URL_OPTIONS = 'options';
@@ -7,3 +9,46 @@ export const defaultOptionsQuery: OptionsQuery = {
maxLines: 2,
format: 'list',
};
+
+export const defaultTraceSelectedColumns = [
+ {
+ key: 'serviceName',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'serviceName--string--tag--true',
+ },
+ {
+ key: 'name',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ },
+ {
+ key: 'durationNano',
+ dataType: DataTypes.Float64,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'durationNano--float64--tag--true',
+ },
+ {
+ key: 'httpMethod',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'httpMethod--string--tag--true',
+ },
+ {
+ key: 'responseStatusCode',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'responseStatusCode--string--tag--true',
+ },
+];
diff --git a/frontend/src/container/OptionsMenu/useOptionsMenu.ts b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
index be2ae00b37..97fbbbb006 100644
--- a/frontend/src/container/OptionsMenu/useOptionsMenu.ts
+++ b/frontend/src/container/OptionsMenu/useOptionsMenu.ts
@@ -16,7 +16,11 @@ import {
} from 'types/api/queryBuilder/queryAutocompleteResponse';
import { DataSource } from 'types/common/queryBuilder';
-import { defaultOptionsQuery, URL_OPTIONS } from './constants';
+import {
+ defaultOptionsQuery,
+ defaultTraceSelectedColumns,
+ URL_OPTIONS,
+} from './constants';
import { InitialOptions, OptionsMenuConfig, OptionsQuery } from './types';
import { getOptionsFromKeys } from './utils';
@@ -124,20 +128,29 @@ const useOptionsMenu = ({
{ queryKey: [debouncedSearchText, isFocused], enabled: isFocused },
);
- const searchedAttributeKeys = useMemo(
- () => searchedAttributesData?.payload?.attributeKeys || [],
- [searchedAttributesData?.payload?.attributeKeys],
- );
+ const searchedAttributeKeys = useMemo(() => {
+ if (searchedAttributesData?.payload?.attributeKeys?.length) {
+ return searchedAttributesData.payload.attributeKeys;
+ }
+ if (dataSource === DataSource.TRACES) {
+ return defaultTraceSelectedColumns;
+ }
+
+ return [];
+ }, [dataSource, searchedAttributesData?.payload?.attributeKeys]);
const initialOptionsQuery: OptionsQuery = useMemo(
() => ({
...defaultOptionsQuery,
...initialOptions,
+ // eslint-disable-next-line no-nested-ternary
selectColumns: initialOptions?.selectColumns
? initialSelectedColumns
+ : dataSource === DataSource.TRACES
+ ? defaultTraceSelectedColumns
: defaultOptionsQuery.selectColumns,
}),
- [initialOptions, initialSelectedColumns],
+ [dataSource, initialOptions, initialSelectedColumns],
);
const selectedColumnKeys = useMemo(
diff --git a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx
index 7395102d4c..3e9276f596 100644
--- a/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx
+++ b/frontend/src/container/OrganizationSettings/PendingInvitesContainer/index.tsx
@@ -279,9 +279,6 @@ function PendingInvitesContainer(): JSX.Element {
-
- {t('invite_link_share_manually')}
-
}
type="primary"
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/PreviewIntervalSelector/components/LogsCountInInterval/index.tsx b/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/PreviewIntervalSelector/components/LogsCountInInterval/index.tsx
index 63ee3ff3c0..b388bc0e7a 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/PreviewIntervalSelector/components/LogsCountInInterval/index.tsx
+++ b/frontend/src/container/PipelinePage/PipelineListsView/Preview/components/PreviewIntervalSelector/components/LogsCountInInterval/index.tsx
@@ -1,5 +1,6 @@
import './styles.scss';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import {
initialFilters,
initialQueriesMap,
@@ -26,12 +27,15 @@ function LogsCountInInterval({
return q;
}, [filter]);
- const result = useGetQueryRange({
- graphType: PANEL_TYPES.TABLE,
- query,
- selectedTime: 'GLOBAL_TIME',
- globalSelectedInterval: timeInterval,
- });
+ const result = useGetQueryRange(
+ {
+ graphType: PANEL_TYPES.TABLE,
+ query,
+ selectedTime: 'GLOBAL_TIME',
+ globalSelectedInterval: timeInterval,
+ },
+ DEFAULT_ENTITY_VERSION,
+ );
if (!result.isFetched) {
return null;
diff --git a/frontend/src/container/PipelinePage/PipelineListsView/Preview/hooks/useSampleLogs.ts b/frontend/src/container/PipelinePage/PipelineListsView/Preview/hooks/useSampleLogs.ts
index 3789856771..457e3bd976 100644
--- a/frontend/src/container/PipelinePage/PipelineListsView/Preview/hooks/useSampleLogs.ts
+++ b/frontend/src/container/PipelinePage/PipelineListsView/Preview/hooks/useSampleLogs.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import {
initialFilters,
initialQueriesMap,
@@ -42,12 +43,15 @@ const useSampleLogs = ({
return q;
}, [count, filter]);
- const response = useGetQueryRange({
- graphType: PANEL_TYPES.LIST,
- query,
- selectedTime: 'GLOBAL_TIME',
- globalSelectedInterval: timeInterval,
- });
+ const response = useGetQueryRange(
+ {
+ graphType: PANEL_TYPES.LIST,
+ query,
+ selectedTime: 'GLOBAL_TIME',
+ globalSelectedInterval: timeInterval,
+ },
+ DEFAULT_ENTITY_VERSION,
+ );
const { isFetching: isLoading, data } = response;
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
index ef18d8ce39..5ebfd47da7 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts
@@ -27,4 +27,6 @@ export type QueryBuilderProps = {
filterConfigs?: Partial;
queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
isListViewPanel?: boolean;
+ showFunctions?: boolean;
+ version: string;
};
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss b/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss
index b23521ad68..dbb7a962ef 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss
@@ -152,7 +152,7 @@
}
::-webkit-scrollbar {
- height: 1rem;
+ height: 0.2rem;
width: 0.2rem;
}
}
diff --git a/frontend/src/container/QueryBuilder/QueryBuilder.tsx b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
index 0bdc321c1e..f95049a2d1 100644
--- a/frontend/src/container/QueryBuilder/QueryBuilder.tsx
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.tsx
@@ -25,6 +25,8 @@ export const QueryBuilder = memo(function QueryBuilder({
filterConfigs = {},
queryComponents,
isListViewPanel = false,
+ showFunctions = false,
+ version,
}: QueryBuilderProps): JSX.Element {
const {
currentQuery,
@@ -46,7 +48,7 @@ export const QueryBuilder = memo(function QueryBuilder({
useEffect(() => {
if (currentDataSource !== initialDataSource || newPanelType !== panelType) {
- if (panelType === PANEL_TYPES.BAR) {
+ if (newPanelType === PANEL_TYPES.BAR) {
handleSetConfig(PANEL_TYPES.BAR, DataSource.METRICS);
return;
}
@@ -170,6 +172,8 @@ export const QueryBuilder = memo(function QueryBuilder({
: listViewLogFilterConfigs
}
queryComponents={queryComponents}
+ showFunctions={showFunctions}
+ version={version}
isListViewPanel
/>
)}
@@ -188,6 +192,8 @@ export const QueryBuilder = memo(function QueryBuilder({
query={query}
filterConfigs={filterConfigs}
queryComponents={queryComponents}
+ showFunctions={showFunctions}
+ version={version}
/>
))}
diff --git a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
index 5f25edb29b..b6f9ebf894 100644
--- a/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
+++ b/frontend/src/container/QueryBuilder/components/Formula/Formula.tsx
@@ -39,6 +39,7 @@ export function Formula({
query,
filterConfigs,
formula,
+ entityVersion: '',
});
const [isCollapse, setIsCollapsed] = useState(false);
@@ -146,6 +147,7 @@ export function Formula({
void;
+ onCloneQuery?: (type: string, query: IBuilderQuery) => void;
onToggleVisibility: () => void;
onCollapseEntity: () => void;
+ onQueryFunctionsUpdates?: (functions: QueryFunctionProps[]) => void;
showDeleteButton: boolean;
isListViewPanel?: boolean;
}
export default function QBEntityOptions({
+ query,
+ isMetricsDataSource,
isCollapsed,
+ showFunctions,
entityType,
entityData,
onDelete,
+ onCloneQuery,
onToggleVisibility,
onCollapseEntity,
showDeleteButton,
- isListViewPanel = false,
+ onQueryFunctionsUpdates,
+ isListViewPanel,
}: QBEntityOptionsProps): JSX.Element {
+ const handleCloneEntity = (): void => {
+ if (isFunction(onCloneQuery)) {
+ onCloneQuery(entityType, entityData);
+ }
+ };
+
return (
;
diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
index 0c90142cb2..1bb761fde7 100644
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@@ -2,8 +2,9 @@
import './Query.styles.scss';
import { Col, Input, Row } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
// ** Constants
-import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
import ROUTES from 'constants/routes';
// ** Components
import {
@@ -38,9 +39,11 @@ import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
import { transformToUpperCase } from 'utils/transformToUpperCase';
import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
+import SpaceAggregationOptions from '../SpaceAggregationOptions/SpaceAggregationOptions';
// ** Types
import { QueryProps } from './Query.interfaces';
+// eslint-disable-next-line sonarjs/cognitive-complexity
export const Query = memo(function Query({
index,
queryVariant,
@@ -48,14 +51,17 @@ export const Query = memo(function Query({
filterConfigs,
queryComponents,
isListViewPanel = false,
+ showFunctions = false,
+ version,
}: QueryProps): JSX.Element {
- const { panelType, currentQuery } = useQueryBuilder();
+ const { panelType, currentQuery, cloneQuery } = useQueryBuilder();
const { pathname } = useLocation();
const [isCollapse, setIsCollapsed] = useState(false);
const {
operators,
+ spaceAggregationOptions,
isMetricsDataSource,
isTracePanelType,
listOfAdditionalFilters,
@@ -63,8 +69,16 @@ export const Query = memo(function Query({
handleChangeQueryData,
handleChangeDataSource,
handleChangeOperator,
+ handleSpaceAggregationChange,
handleDeleteQuery,
- } = useQueryOperations({ index, query, filterConfigs, isListViewPanel });
+ handleQueryFunctionsUpdates,
+ } = useQueryOperations({
+ index,
+ query,
+ filterConfigs,
+ isListViewPanel,
+ entityVersion: version,
+ });
const handleChangeAggregateEvery = useCallback(
(value: IBuilderQuery['stepInterval']) => {
@@ -192,13 +206,17 @@ export const Query = memo(function Query({
-
@@ -225,7 +243,11 @@ export const Query = memo(function Query({
1}
isListViewPanel={isListViewPanel}
/>
@@ -322,23 +361,42 @@ export const Query = memo(function Query({
{isMetricsDataSource && (
-
)}
-
{isMetricsDataSource && (
+ {isVersionV4 && isMetricsDataSource && (
+
) : (
+
+
+ )}
)}
diff --git a/frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx b/frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx
new file mode 100644
index 0000000000..1374c2bb1a
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import { Button, Flex, Input, Select } from 'antd';
+import cx from 'classnames';
+import {
+ queryFunctionOptions,
+ queryFunctionsTypesConfig,
+} from 'constants/queryFunctionOptions';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { debounce, isNil } from 'lodash-es';
+import { X } from 'lucide-react';
+import { QueryFunctionProps } from 'types/api/queryBuilder/queryBuilderData';
+
+interface FunctionProps {
+ funcData: QueryFunctionProps;
+ index: any;
+ handleUpdateFunctionArgs: any;
+ handleUpdateFunctionName: any;
+ handleDeleteFunction: any;
+}
+
+export default function Function({
+ funcData,
+ index,
+ handleUpdateFunctionArgs,
+ handleUpdateFunctionName,
+ handleDeleteFunction,
+}: FunctionProps): JSX.Element {
+ const isDarkMode = useIsDarkMode();
+ const { showInput } = queryFunctionsTypesConfig[funcData.name];
+
+ let functionValue;
+
+ const hasValue = !isNil(
+ funcData.args && funcData.args.length > 0 && funcData.args[0],
+ );
+
+ if (hasValue) {
+ // eslint-disable-next-line prefer-destructuring
+ functionValue = funcData.args[0];
+ }
+
+ const debouncedhandleUpdateFunctionArgs = debounce(
+ handleUpdateFunctionArgs,
+ 500,
+ );
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss
new file mode 100644
index 0000000000..8eb6bf2ffd
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss
@@ -0,0 +1,151 @@
+.query-functions-container {
+ display: flex;
+ margin: 0 12px;
+ justify-content: center;
+ align-items: center;
+
+ .function-btn,
+ .add-function-btn {
+ display: flex;
+ gap: 8px;
+
+ cursor: pointer;
+ border-radius: 3px !important;
+ }
+
+ .function-btn {
+ border-top-right-radius: 0px !important;
+ border-bottom-right-radius: 0px !important;
+
+ .function-icon {
+ height: 18px;
+ width: 18px;
+ }
+ }
+
+ .add-function-btn {
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+
+ background-color: var(--bg-slate-500) !important;
+ opacity: 0.8;
+
+ &:disabled {
+ opacity: 0.4;
+ }
+ }
+
+ &.hasFunctions {
+ .function-btn {
+ border-top-right-radius: 3px !important;
+ border-bottom-right-radius: 3px !important;
+ margin-right: 8px;
+ }
+
+ .add-function-btn {
+ border-top-left-radius: 3px !important;
+ border-bottom-left-radius: 3px !important;
+ margin-left: 8px;
+ }
+ }
+}
+
+.query-functions-list {
+ display: flex;
+ gap: 8px;
+
+ .query-function {
+ position: relative;
+
+ &::before {
+ content: '';
+ height: 1px;
+ width: 8px;
+ position: absolute;
+ left: -8px;
+ top: 16px;
+ z-index: 0;
+ color: var(--bg-sakura-500);
+ background-color: var(--bg-sakura-500);
+ }
+
+ &::after {
+ content: '';
+ height: 1px;
+ width: 8px;
+ position: absolute;
+ right: -8px;
+ top: 16px;
+ z-index: 0;
+ color: var(--bg-sakura-500);
+ background-color: var(--bg-sakura-500);
+ }
+
+ .query-function-name-selector {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+
+ .ant-select-selector {
+ border: none;
+ background: var(--bg-ink-200);
+ }
+
+ &.showInput {
+ .ant-select-selector {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+ }
+
+ .query-function-value {
+ width: 55px;
+ border-left: 0;
+ background: var(--bg-ink-200);
+ border-radius: 0;
+ border: 1px solid transparent;
+
+ &:focus {
+ border-color: transparent !important;
+ }
+ }
+
+ .query-function-delete-btn {
+ border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+
+ border: none !important;
+
+ border-top-left-radius: 0px !important;
+ border-bottom-left-radius: 0px !important;
+ min-width: 24px !important;
+ }
+ }
+}
+
+.lightMode {
+ .query-functions-container {
+ .add-function-btn {
+ background-color: var(--bg-vanilla-100) !important;
+ }
+ }
+
+ .query-functions-list {
+ .query-function {
+ border: 1px solid var(--bg-vanilla-300);
+ .query-function-name-selector {
+ .ant-select-selector {
+ background: var(--bg-vanilla-100);
+ }
+ }
+
+ .query-function-value {
+ background: var(--bg-vanilla-100);
+
+ &:focus {
+ border-color: transparent !important;
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
new file mode 100644
index 0000000000..68c2701982
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
@@ -0,0 +1,181 @@
+import './QueryFunctions.styles.scss';
+
+import { Button, Tooltip } from 'antd';
+import cx from 'classnames';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { cloneDeep, pullAt } from 'lodash-es';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
+import { QueryFunctionProps } from 'types/api/queryBuilder/queryBuilderData';
+import { QueryFunctionsTypes } from 'types/common/queryBuilder';
+
+import Function from './Function';
+
+const defaultFunctionStruct: QueryFunctionProps = {
+ name: QueryFunctionsTypes.CUTOFF_MIN,
+ args: [],
+};
+
+interface QueryFunctionsProps {
+ queryFunctions: QueryFunctionProps[];
+ onChange: (functions: QueryFunctionProps[]) => void;
+}
+
+// SVG component
+function FunctionIcon({
+ fillColor = 'white',
+ className,
+}: {
+ fillColor: string;
+ className: string;
+}): JSX.Element {
+ return (
+
+ );
+}
+
+export default function QueryFunctions({
+ queryFunctions,
+ onChange,
+}: QueryFunctionsProps): JSX.Element {
+ const [functions, setFunctions] = useState(
+ queryFunctions,
+ );
+
+ const isDarkMode = useIsDarkMode();
+
+ const handleAddNewFunction = (): void => {
+ const updatedFunctionsArr = [
+ ...functions,
+ {
+ ...defaultFunctionStruct,
+ },
+ ];
+
+ setFunctions(updatedFunctionsArr);
+
+ onChange(updatedFunctionsArr);
+ };
+
+ const handleDeleteFunction = (
+ queryFunction: QueryFunctionProps,
+ index: number,
+ ): void => {
+ const clonedFunctions = cloneDeep(functions);
+ pullAt(clonedFunctions, index);
+
+ setFunctions(clonedFunctions);
+ onChange(clonedFunctions);
+ };
+
+ const handleUpdateFunctionName = (
+ func: QueryFunctionProps,
+ index: number,
+ value: string,
+ ): void => {
+ const updateFunctions = cloneDeep(functions);
+
+ if (updateFunctions && updateFunctions.length > 0 && updateFunctions[index]) {
+ updateFunctions[index].name = value;
+ setFunctions(updateFunctions);
+ onChange(updateFunctions);
+ }
+ };
+
+ const handleUpdateFunctionArgs = (
+ func: QueryFunctionProps,
+ index: number,
+ value: string,
+ ): void => {
+ const updateFunctions = cloneDeep(functions);
+
+ if (updateFunctions && updateFunctions.length > 0 && updateFunctions[index]) {
+ updateFunctions[index].args = [value];
+ setFunctions(updateFunctions);
+ onChange(updateFunctions);
+ }
+ };
+
+ return (
+ [] = useMemo(
() => [{ label: columnName, value: columnName }],
@@ -211,7 +221,7 @@ export function HavingFilter({
disabled={isMetricsDataSource && !query.aggregateAttribute.key}
style={{ width: '100%' }}
notFoundContent={currentFormValue.value.length === 0 ? undefined : null}
- placeholder="Count(operation) > 5"
+ placeholder="GroupBy(operation) > 5"
onDeselect={handleDeselect}
onChange={handleChange}
onSelect={handleSelect}
diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx
index 5732b22712..24cf6b1730 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx
+++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/__tests__/utils.test.tsx
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
// Constants
import {
HAVING_OPERATORS,
@@ -31,6 +32,7 @@ describe('Having filter behaviour', () => {
-
@@ -46,6 +78,15 @@ export default function QBEntityOptions({
>
{entityData.disabled ?
+
+
+ )}
+
+
+ {showFunctions &&
+ isMetricsDataSource &&
+ query &&
+ onQueryFunctionsUpdates && (
+
@@ -77,4 +128,9 @@ export default function QBEntityOptions({
QBEntityOptions.defaultProps = {
isListViewPanel: false,
+ query: undefined,
+ isMetricsDataSource: false,
+ onQueryFunctionsUpdates: undefined,
+ showFunctions: false,
+ onCloneQuery: noop,
};
diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
index fba34ef6cd..05713395ff 100644
--- a/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts
@@ -7,4 +7,6 @@ export type QueryProps = {
query: IBuilderQuery;
queryVariant: 'static' | 'dropdown';
isListViewPanel?: boolean;
+ showFunctions?: boolean;
+ version: string;
} & Pick 0 ? 'hasFunctions' : '',
+ )}
+ >
+
+
+ = 3
+ ? 'Functions are in early access. You can add a maximum of 3 function as of now.'
+ : ''
+ }
+ placement="right"
+ >
+
+
+
+ );
+}
diff --git a/frontend/src/container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions.tsx b/frontend/src/container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions.tsx
new file mode 100644
index 0000000000..9ed6f93c45
--- /dev/null
+++ b/frontend/src/container/QueryBuilder/components/SpaceAggregationOptions/SpaceAggregationOptions.tsx
@@ -0,0 +1,67 @@
+import { Select } from 'antd';
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import { useEffect, useState } from 'react';
+import { MetricAggregateOperator } from 'types/common/queryBuilder';
+
+interface SpaceAggregationOptionsProps {
+ panelType: PANEL_TYPES | null;
+ selectedValue: string | undefined;
+ aggregatorAttributeType: ATTRIBUTE_TYPES | null;
+ disabled: boolean;
+ onSelect: (value: string) => void;
+ operators: any[];
+}
+
+export default function SpaceAggregationOptions({
+ panelType,
+ selectedValue,
+ aggregatorAttributeType = ATTRIBUTE_TYPES.GAUGE,
+ disabled,
+ onSelect,
+ operators,
+}: SpaceAggregationOptionsProps): JSX.Element {
+ const placeHolderText = panelType === PANEL_TYPES.VALUE ? 'Sum' : 'Sum By';
+ const [defaultValue, setDefaultValue] = useState(
+ selectedValue || placeHolderText,
+ );
+
+ useEffect(() => {
+ if (!selectedValue) {
+ if (
+ aggregatorAttributeType === ATTRIBUTE_TYPES.HISTOGRAM ||
+ aggregatorAttributeType === ATTRIBUTE_TYPES.EXPONENTIAL_HISTOGRAM
+ ) {
+ setDefaultValue(MetricAggregateOperator.P90);
+ onSelect(MetricAggregateOperator.P90);
+ } else if (aggregatorAttributeType === ATTRIBUTE_TYPES.SUM) {
+ setDefaultValue(MetricAggregateOperator.SUM);
+ onSelect(MetricAggregateOperator.SUM);
+ } else if (aggregatorAttributeType === ATTRIBUTE_TYPES.GAUGE) {
+ setDefaultValue(MetricAggregateOperator.AVG);
+ onSelect(MetricAggregateOperator.AVG);
+ }
+ }
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [aggregatorAttributeType]);
+
+ return (
+
+ {functions.map((func, index) => (
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
index f27336e96a..492329f69b 100644
--- a/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/AggregatorFilter/AggregatorFilter.tsx
@@ -111,7 +111,7 @@ export const AggregatorFilter = memo(function AggregatorFilter({
debouncedValue,
query.aggregateOperator,
query.dataSource,
- ])?.payload.attributeKeys || [],
+ ])?.payload?.attributeKeys || [],
[debouncedValue, query.aggregateOperator, query.dataSource, queryClient],
);
diff --git a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
index 386786f70c..e7b00756f5 100644
--- a/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/GroupByFilter/GroupByFilter.tsx
@@ -1,11 +1,7 @@
import { Select, Spin } from 'antd';
import { getAggregateKeys } from 'api/queryBuilder/getAttributeKeys';
// ** Constants
-import {
- idDivider,
- QueryBuilderKeys,
- selectValueDivider,
-} from 'constants/queryBuilder';
+import { idDivider, QueryBuilderKeys } from 'constants/queryBuilder';
import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
import useDebounce from 'hooks/useDebounce';
@@ -83,11 +79,7 @@ export const GroupByFilter = memo(function GroupByFilter({
dataType={item.dataType || ''}
/>
),
- value: `${transformStringWithPrefix({
- str: item.key,
- prefix: item.type || '',
- condition: !item.isColumn,
- })}${selectValueDivider}${item.id}`,
+ value: `${item.id}`,
})) || [];
setOptionsData(options);
@@ -135,7 +127,8 @@ export const GroupByFilter = memo(function GroupByFilter({
const keys = await getAttributeKeys();
const groupByValues: BaseAutocompleteData[] = values.map((item) => {
- const [currentValue, id] = item.value.split(selectValueDivider);
+ const id = item.value;
+ const currentValue = item.value.split(idDivider)[0];
if (id && id.includes(idDivider)) {
const attribute = keys.find((item) => item.id === id);
@@ -174,11 +167,7 @@ export const GroupByFilter = memo(function GroupByFilter({
condition: !item.isColumn,
}),
)}`,
- value: `${transformStringWithPrefix({
- str: item.key,
- prefix: item.type || '',
- condition: !item.isColumn,
- })}${selectValueDivider}${item.id}`,
+ value: `${item.id}`,
}),
);
diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.interfaces.ts b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.interfaces.ts
index d4c9ebbf88..1bdb838aa6 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.interfaces.ts
+++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.interfaces.ts
@@ -1,6 +1,7 @@
import { Having, IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
export type HavingFilterProps = {
+ entityVersion: string;
query: IBuilderQuery;
onChange: (having: Having[]) => void;
};
diff --git a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
index 4f638496f4..7d11d018cc 100644
--- a/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
+++ b/frontend/src/container/QueryBuilder/filters/HavingFilter/HavingFilter.tsx
@@ -1,4 +1,5 @@
import { Select } from 'antd';
+import { ENTITY_VERSION_V4 } from 'constants/app';
// ** Constants
import { HAVING_OPERATORS, initialHavingValues } from 'constants/queryBuilder';
import { HavingFilterTag } from 'container/QueryBuilder/components';
@@ -22,6 +23,7 @@ import { getHavingObject, isValidHavingValue } from '../utils';
import { HavingFilterProps } from './HavingFilter.interfaces';
export function HavingFilter({
+ entityVersion,
query,
onChange,
}: HavingFilterProps): JSX.Element {
@@ -48,10 +50,18 @@ export function HavingFilter({
[query],
);
- const columnName = useMemo(
- () => `${query.aggregateOperator.toUpperCase()}(${aggregatorAttribute})`,
- [query, aggregatorAttribute],
- );
+ const columnName = useMemo(() => {
+ if (
+ query &&
+ query.dataSource === DataSource.METRICS &&
+ query.spaceAggregation &&
+ entityVersion === ENTITY_VERSION_V4
+ ) {
+ return `${query.spaceAggregation.toUpperCase()}(${aggregatorAttribute})`;
+ }
+
+ return `${query.aggregateOperator.toUpperCase()}(${aggregatorAttribute})`;
+ }, [query, aggregatorAttribute, entityVersion]);
const aggregatorOptions: SelectOption{value}
-
-
- Type:
- {optionType}
-
-
- Data type:
- {dataType}
-
+
+
) : (
- {label}
+
+ {label}
+
)}
);
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss
index 8fd979fa8e..a6f5fcaf37 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/QueryBuilderSearch.styles.scss
@@ -1,3 +1,16 @@
+.selectOptionContainer {
+ display: flex;
+ gap: 8px;
+ justify-content: space-between;
+ align-items: center;
+ overflow-x: auto;
+
+ &::-webkit-scrollbar {
+ width: 0.2rem;
+ height: 0.2rem;
+ }
+}
+
.lightMode {
.query-builder-search {
.ant-select-dropdown {
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
index 46d535737a..85c7ea2c64 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx
@@ -59,6 +59,7 @@ function QueryBuilderSearch({
updateTag,
handleClearTag,
handleKeyDown,
+ handleOnBlur,
handleSearch,
handleSelect,
tags,
@@ -260,6 +261,7 @@ function QueryBuilderSearch({
notFoundContent={isFetching ?
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
index fd6d5f209e..5e010ff34a 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts
@@ -16,19 +16,12 @@ export const StyledCheckOutlined = styled(CheckOutlined)`
float: right;
`;
-export const SelectOptionContainer = styled.div`
- display: flex;
- gap: 8px;
- justify-content: space-between;
- align-items: center;
- overflow-x: auto;
-`;
-
export const TagContainer = styled(Tag)`
&&& {
+ display: inline-block;
border-radius: 3px;
- padding: 0.3rem 0.3rem;
- font-weight: 400;
+ padding: 0.1rem 0.2rem;
+ font-weight: 300;
font-size: 0.6rem;
}
`;
diff --git a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
index c549a6fd62..ec7eba3973 100644
--- a/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
+++ b/frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/utils.ts
@@ -5,7 +5,7 @@ import { parse } from 'papaparse';
import { orderByValueDelimiter } from '../OrderByFilter/utils';
// eslint-disable-next-line no-useless-escape
-export const tagRegexp = /^\s*(.*?)\s*(IN|NOT_IN|LIKE|NOT_LIKE|REGEX|NOT_REGEX|=|!=|EXISTS|NOT_EXISTS|CONTAINS|NOT_CONTAINS|>=|>|<=|<|HAS|NHAS)\s*(.*)$/g;
+export const tagRegexp = /^\s*(.*?)\s*(\bIN\b|\bNOT_IN\b|\bLIKE\b|\bNOT_LIKE\b|\bREGEX\b|\bNOT_REGEX\b|=|!=|\bEXISTS\b|\bNOT_EXISTS\b|\bCONTAINS\b|\bNOT_CONTAINS\b|>=|>|<=|<|\bHAS\b|\bNHAS\b)\s*(.*)$/gi;
export function isInNInOperator(value: string): boolean {
return value === OPERATORS.IN || value === OPERATORS.NIN;
@@ -25,8 +25,8 @@ export function getTagToken(tag: string): ITagToken {
const [, matchTagKey, matchTagOperator, matchTagValue] = match;
return {
tagKey: matchTagKey,
- tagOperator: matchTagOperator,
- tagValue: isInNInOperator(matchTagOperator)
+ tagOperator: matchTagOperator.toUpperCase(),
+ tagValue: isInNInOperator(matchTagOperator.toUpperCase())
? parse(matchTagValue).data.flat()
: matchTagValue,
} as ITagToken;
diff --git a/frontend/src/container/QueryTable/QueryTable.tsx b/frontend/src/container/QueryTable/QueryTable.tsx
index 34b146f6da..2fa1d05f65 100644
--- a/frontend/src/container/QueryTable/QueryTable.tsx
+++ b/frontend/src/container/QueryTable/QueryTable.tsx
@@ -22,7 +22,8 @@ export function QueryTable({
...props
}: QueryTableProps): JSX.Element {
const { isDownloadEnabled = false, fileName = '' } = downloadOption || {};
- const { servicename } = useParams();
+ const { servicename: encodedServiceName } = useParams();
+ const servicename = decodeURIComponent(encodedServiceName);
const { loading } = props;
const { columns: newColumns, dataSource: newDataSource } = useMemo(() => {
if (columns && dataSource) {
diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.styles.scss b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.styles.scss
new file mode 100644
index 0000000000..51b4c266b2
--- /dev/null
+++ b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.styles.scss
@@ -0,0 +1,33 @@
+.resourceAttributesFilter-container {
+ display: flex;
+ align-items: center;
+ justify-content: stretch;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin-bottom: 16px;
+
+ .resource-attributes-selector {
+ flex: 1;
+ border-radius: 3px;
+
+ background-color: var(--bg-ink-400);
+ border: 1px solid #454c58;
+ }
+
+ .environment-selector {
+ min-width: 200px;
+ }
+
+ .ant-form-item {
+ margin-bottom: 0;
+ }
+}
+
+.lightMode {
+ .resourceAttributesFilter-container {
+ .resource-attributes-selector {
+ border: 1px solid #d9d9d9;
+ background: var(--bg-vanilla-100);
+ }
+ }
+}
diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
index a61a0ce0ee..4211291742 100644
--- a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
+++ b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx
@@ -1,10 +1,17 @@
+import './ResourceAttributesFilter.styles.scss';
+
import { CloseCircleFilled } from '@ant-design/icons';
import { Button, Select, Spin } from 'antd';
import useResourceAttribute, {
isResourceEmpty,
} from 'hooks/useResourceAttribute';
-import { convertMetricKeyToTrace } from 'hooks/useResourceAttribute/utils';
-import { ReactNode, useMemo } from 'react';
+import {
+ convertMetricKeyToTrace,
+ getEnvironmentTagKeys,
+ getEnvironmentTagValues,
+} from 'hooks/useResourceAttribute/utils';
+import { ReactNode, useEffect, useMemo, useState } from 'react';
+import { SelectOption } from 'types/common/select';
import { popupContainer } from 'utils/selectPopupContainer';
import { v4 as uuid } from 'uuid';
@@ -22,60 +29,129 @@ function ResourceAttributesFilter({
handleClearAll,
handleFocus,
handleChange,
+ handleEnvironmentChange,
selectedQuery,
optionsData,
loading,
} = useResourceAttribute();
- const isEmpty = useMemo(
- () => isResourceEmpty(queries, staging, selectedQuery),
- [queries, selectedQuery, staging],
+ const [environments, setEnvironments] = useState<
+ SelectOption[]
+ >([]);
+
+ const [selectedEnvironments, setSelectedEnvironments] = useState([]);
+
+ const queriesExcludingEnvironment = useMemo(
+ () =>
+ queries.filter(
+ (query) => query.tagKey !== 'resource_deployment_environment',
+ ),
+ [queries],
);
- return (
-
-
+ useEffect(() => {
+ const resourceDeploymentEnvironmentQuery = queries.filter(
+ (query) => query.tagKey === 'resource_deployment_environment',
+ );
+
+ if (resourceDeploymentEnvironmentQuery?.length > 0) {
+ setSelectedEnvironments(resourceDeploymentEnvironmentQuery[0].tagValue);
+ } else {
+ setSelectedEnvironments([]);
+ }
+ }, [queries]);
+
+ useEffect(() => {
+ getEnvironmentTagKeys().then((tagKeys) => {
+ if (tagKeys && Array.isArray(tagKeys) && tagKeys.length > 0) {
+ getEnvironmentTagValues().then((tagValues) => {
+ setEnvironments(tagValues);
+ });
+ }
+ });
+ }, []);
+
+ return (
+
{convertMetricKeyToTrace(queryData.tagKey)}
{queryData.operator}
-
+
{queryData.tagValue.join(', ')}
diff --git a/frontend/src/container/ResourceAttributesFilter/styles.ts b/frontend/src/container/ResourceAttributesFilter/styles.ts
index c1dcd863f2..390190d2e4 100644
--- a/frontend/src/container/ResourceAttributesFilter/styles.ts
+++ b/frontend/src/container/ResourceAttributesFilter/styles.ts
@@ -7,9 +7,9 @@ export const SearchContainer = styled.div`
display: flex;
align-items: center;
gap: 0.2rem;
- padding: 0.2rem;
- margin: 1rem 0;
- border: 1px solid #ccc5;
+ padding: 0 0.2rem;
+ box-sizing: border-box;
+ border-radius: 3px;
`;
export const QueryChipContainer = styled.span`
diff --git a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
index 5213513dc8..f592f6a540 100644
--- a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
+++ b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricTable.tsx
@@ -1,6 +1,7 @@
import { WarningFilled } from '@ant-design/icons';
import { Flex, Typography } from 'antd';
import { ResizeTable } from 'components/ResizeTable';
+import { ENTITY_VERSION_V4 } from 'constants/app';
import { MAX_RPS_LIMIT } from 'constants/global';
import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
import { useGetQueriesRange } from 'hooks/queryBuilder/useGetQueriesRange';
@@ -35,7 +36,7 @@ function ServiceMetricTable({
const { data: licenseData, isFetching } = useLicense();
const isCloudUserVal = isCloudUser();
- const queries = useGetQueriesRange(queryRangeRequestData, {
+ const queries = useGetQueriesRange(queryRangeRequestData, ENTITY_VERSION_V4, {
queryKey: [
`GetMetricsQueryRange-${queryRangeRequestData[0].selectedTime}-${globalSelectedInterval}`,
maxTime,
diff --git a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts
index 46f94acd87..352e144ade 100644
--- a/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts
+++ b/frontend/src/container/ServiceApplication/ServiceMetrics/ServiceMetricsQuery.ts
@@ -166,11 +166,17 @@ export const serviceMetricsQuery = (
operationPrSecondAdditionalItems,
];
- const aggregateOperators = [
- MetricAggregateOperator.HIST_QUANTILE_99,
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
- MetricAggregateOperator.SUM_RATE,
+ const timeAggregateOperators = [
+ MetricAggregateOperator.EMPTY,
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ MetricAggregateOperator.RATE,
+ ];
+ const spaceAggregateOperators = [
+ MetricAggregateOperator.P99,
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
+ MetricAggregateOperator.SUM,
];
const disabled = [false, true, true, false];
@@ -201,7 +207,8 @@ export const serviceMetricsQuery = (
additionalItems,
disabled,
legends,
- aggregateOperators,
+ timeAggregateOperators,
+ spaceAggregateOperators,
expressions,
legendFormulas,
groupBy,
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
index 9b897d2a9a..ed6f10b10a 100644
--- a/frontend/src/container/SideNav/menuItems.tsx
+++ b/frontend/src/container/SideNav/menuItems.tsx
@@ -16,6 +16,7 @@ import {
ScrollText,
Settings,
Slack,
+ // Unplug,
UserPlus,
} from 'lucide-react';
@@ -89,6 +90,11 @@ const menuItems: SidebarItem[] = [
label: 'Alerts',
icon: = {
[ROUTES.TRACES_EXPLORER]: ROUTES.TRACE,
[ROUTES.TRACE_EXPLORER]: ROUTES.TRACE,
[ROUTES.LOGS_BASE]: ROUTES.LOGS_EXPLORER,
+ [ROUTES.INTEGRATIONS_BASE]: ROUTES.INTEGRATIONS_INSTALLED,
};
export default menuItems;
diff --git a/frontend/src/container/TimeSeriesView/index.tsx b/frontend/src/container/TimeSeriesView/index.tsx
index 4acffd7e61..2dd009746d 100644
--- a/frontend/src/container/TimeSeriesView/index.tsx
+++ b/frontend/src/container/TimeSeriesView/index.tsx
@@ -1,3 +1,4 @@
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
@@ -49,6 +50,7 @@ function TimeSeriesViewContainer({
dataSource,
},
},
+ DEFAULT_ENTITY_VERSION,
{
queryKey: [
REACT_QUERY_KEY.GET_QUERY_RANGE,
diff --git a/frontend/src/container/TopNav/DateTimeSelection/config.ts b/frontend/src/container/TopNav/DateTimeSelection/config.ts
index bc77afe7d6..3618686c95 100644
--- a/frontend/src/container/TopNav/DateTimeSelection/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelection/config.ts
@@ -81,6 +81,10 @@ export const routesToSkip = [
ROUTES.ALL_CHANNELS,
ROUTES.USAGE_EXPLORER,
ROUTES.GET_STARTED,
+ ROUTES.GET_STARTED_APPLICATION_MONITORING,
+ ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
+ ROUTES.GET_STARTED_LOGS_MANAGEMENT,
+ ROUTES.GET_STARTED_AWS_MONITORING,
ROUTES.VERSION,
ROUTES.ALL_DASHBOARD,
ROUTES.ORG_SETTINGS,
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
index 73688ad109..bd4cc3cdb1 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss
@@ -58,8 +58,6 @@
.date-time-root {
.ant-popover-inner {
- width: 532px;
- min-height: 334px;
border-radius: 4px !important;
border: 1px solid var(--bg-slate-400);
box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2) !important;
@@ -129,12 +127,20 @@
}
.relative-date-time {
- width: 307px;
display: flex;
flex-direction: column;
gap: 35px;
padding: 13px 14px;
+ &.date-picker {
+ width: 480px;
+ height: 430px;
+ }
+
+ &.relative-times {
+ width: 320px;
+ }
+
.relative-date-time-section {
display: flex;
gap: 6px;
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index becd3fed7b..6231505580 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -53,7 +53,7 @@ export const Options: Option[] = [
{ value: '1day', label: 'Last 1 day' },
{ value: '3days', label: 'Last 3 days' },
{ value: '1week', label: 'Last 1 week' },
- { value: 'custom', label: 'Custom...' },
+ { value: 'custom', label: 'Custom' },
];
export interface Option {
@@ -117,6 +117,10 @@ export const routesToSkip = [
ROUTES.ALL_CHANNELS,
ROUTES.USAGE_EXPLORER,
ROUTES.GET_STARTED,
+ ROUTES.GET_STARTED_APPLICATION_MONITORING,
+ ROUTES.GET_STARTED_INFRASTRUCTURE_MONITORING,
+ ROUTES.GET_STARTED_LOGS_MANAGEMENT,
+ ROUTES.GET_STARTED_AWS_MONITORING,
ROUTES.VERSION,
ROUTES.ALL_DASHBOARD,
ROUTES.ORG_SETTINGS,
@@ -135,6 +139,9 @@ export const routesToSkip = [
ROUTES.TRACES_EXPLORER,
ROUTES.TRACES_SAVE_VIEWS,
ROUTES.SHORTCUTS,
+ ROUTES.INTEGRATIONS_BASE,
+ ROUTES.INTEGRATIONS_INSTALLED,
+ ROUTES.INTEGRATIONS_MARKETPLACE,
];
export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
index 6e5c0c5b48..3ef5125ad7 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx
@@ -44,7 +44,6 @@ import { DateTimeRangeType } from '../CustomDateTimeModal';
import {
getDefaultOption,
getOptions,
- LexicalContext,
LocalStorageTimeRange,
Time,
TimeRange,
@@ -319,22 +318,12 @@ function DateTimeSelection({
onLastRefreshHandler();
};
- const onCustomDateHandler = (
- dateTimeRange: DateTimeRangeType,
- lexicalContext?: LexicalContext,
- ): void => {
+ const onCustomDateHandler = (dateTimeRange: DateTimeRangeType): void => {
if (dateTimeRange !== null) {
const [startTimeMoment, endTimeMoment] = dateTimeRange;
if (startTimeMoment && endTimeMoment) {
- let startTime = startTimeMoment;
- let endTime = endTimeMoment;
- if (
- lexicalContext &&
- lexicalContext === LexicalContext.CUSTOM_DATE_PICKER
- ) {
- startTime = startTime.startOf('day');
- endTime = endTime.endOf('day');
- }
+ const startTime = startTimeMoment;
+ const endTime = endTimeMoment;
setCustomDTPickerVisible(false);
updateTimeInterval('custom', [
startTime.toDate().getTime(),
diff --git a/frontend/src/container/TraceDetail/SelectedSpanDetails/config.ts b/frontend/src/container/TraceDetail/SelectedSpanDetails/config.ts
index 46d0a5fc90..145b79f2ff 100644
--- a/frontend/src/container/TraceDetail/SelectedSpanDetails/config.ts
+++ b/frontend/src/container/TraceDetail/SelectedSpanDetails/config.ts
@@ -49,13 +49,16 @@ export const getTraceToLogsQuery = (
limit: null,
aggregateAttribute: initialAutocompleteData,
aggregateOperator: LogsAggregatorOperator.NOOP,
+ timeAggregation: '',
+ spaceAggregation: '',
+ functions: [],
expression: 'A',
groupBy: [],
having: [],
legend: '',
orderBy: [],
queryName: 'A',
- reduceTo: 'min',
+ reduceTo: 'avg',
stepInterval: getStep({
start: minTime,
end: maxTime,
diff --git a/frontend/src/container/TracesExplorer/ListView/index.tsx b/frontend/src/container/TracesExplorer/ListView/index.tsx
index 4f18bb3a27..f78be8c4de 100644
--- a/frontend/src/container/TracesExplorer/ListView/index.tsx
+++ b/frontend/src/container/TracesExplorer/ListView/index.tsx
@@ -1,4 +1,5 @@
import { ResizeTable } from 'components/ResizeTable';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { LOCALSTORAGE } from 'constants/localStorage';
import { QueryParams } from 'constants/query';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -62,6 +63,7 @@ function ListView(): JSX.Element {
selectColumns: options?.selectColumns,
},
},
+ DEFAULT_ENTITY_VERSION,
{
queryKey: [
REACT_QUERY_KEY.GET_QUERY_RANGE,
diff --git a/frontend/src/container/TracesExplorer/QuerySection/index.tsx b/frontend/src/container/TracesExplorer/QuerySection/index.tsx
index 279f57b5df..0bd9515720 100644
--- a/frontend/src/container/TracesExplorer/QuerySection/index.tsx
+++ b/frontend/src/container/TracesExplorer/QuerySection/index.tsx
@@ -53,6 +53,7 @@ function QuerySection(): JSX.Element {
}}
filterConfigs={filterConfigs}
queryComponents={queryComponents}
+ version="v3" // setting this to v3 as we this is rendered in logs explorer
actions={
+ ),
+ children: (
+ Configure
+
+ ),
+ children: Data Collected
+
+ ),
+ children: (
+ ;
+ metricsData: Array;
+}
+
+function DataCollected(props: DataCollectedProps): JSX.Element {
+ const { logsData, metricsData } = props;
+ const logsColumns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Path',
+ dataIndex: 'path',
+ key: 'path',
+ },
+ {
+ title: 'Type',
+ dataIndex: 'type',
+ key: 'type',
+ },
+ ];
+
+ const metricsColumns = [
+ {
+ title: 'Name',
+ dataIndex: 'name',
+ key: 'name',
+ },
+ {
+ title: 'Type',
+ dataIndex: 'type',
+ key: 'type',
+ },
+ {
+ title: 'Unit',
+ dataIndex: 'unit',
+ key: 'unit',
+ },
+ ];
+
+ return (
+
+
-
+ {value}
+
+
+ Type:
+ {optionType}
+
+
+ Data type:
+ {dataType}
+
+
- {queries.map((query) => (
-
- {idx === 0 ? convertMetricKeyToTrace(query) : query}
-
- ))}
-
-
+
);
}
diff --git a/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx b/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx
index 363e6d5143..b2babd78b5 100644
--- a/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx
+++ b/frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx
@@ -12,7 +12,10 @@ function QueryChip({ queryData, onClose }: IQueryChipProps): JSX.Element {
+
+
+
+
+
+
+
+
+ {queriesExcludingEnvironment.map((query) => (
+
+ {idx === 0 ? convertMetricKeyToTrace(query) : query}
+
+ ))}
+
+
+
+ );
+}
+
+export default IntegrationDetailContent;
diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx
new file mode 100644
index 0000000000..92a5e0c823
--- /dev/null
+++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx
@@ -0,0 +1,48 @@
+import './IntegrationDetailContentTabs.styles.scss';
+
+import { Button, Typography } from 'antd';
+import cx from 'classnames';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+import { useState } from 'react';
+
+interface ConfigurationProps {
+ configuration: Array<{ title: string; instructions: string }>;
+}
+
+function Configure(props: ConfigurationProps): JSX.Element {
+ // TODO Mardown renderer support once instructions are ready
+ const { configuration } = props;
+ const [selectedConfigStep, setSelectedConfigStep] = useState(0);
+
+ const handleMenuClick = (index: number): void => {
+ setSelectedConfigStep(index);
+ };
+ return (
+
+
+ );
+}
+
+export default Configure;
diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx
new file mode 100644
index 0000000000..1c605ec863
--- /dev/null
+++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx
@@ -0,0 +1,85 @@
+import './IntegrationDetailContentTabs.styles.scss';
+
+import { Table, Typography } from 'antd';
+import { BarChart2, ScrollText } from 'lucide-react';
+
+interface DataCollectedProps {
+ logsData: Array
+ {configuration.map((config, index) => (
+
+ ))}
+
+
+
+
+
+
+ index % 2 === 0 ? 'table-row-dark' : ''
+ }
+ dataSource={logsData}
+ pagination={{ pageSize: 20 }}
+ className="logs-section-table"
+ />
+
+
+ Logs
+
+ 
+