{
+ e.stopPropagation();
+ handleViewChange('timezone');
+ setIsOpenedFromFooter(false);
+ }}
+ >
+ {activeTimezoneOffset}
+
+ )}
+
+
+ );
+ }
+
return (
-
-
>;
+ setActiveView: Dispatch>;
+ isOpenedFromFooter: boolean;
+}
+
+interface TimezoneItemProps {
+ timezone: Timezone;
+ isSelected?: boolean;
+ onClick?: () => void;
+}
+
+const ICON_SIZE = 14;
+
+function SearchBar({
+ value,
+ onChange,
+ setIsOpen,
+ setActiveView,
+ isOpenedFromFooter = false,
+}: SearchBarProps): JSX.Element {
+ const handleKeyDown = useCallback(
+ (e: React.KeyboardEvent): void => {
+ if (e.key === 'Escape') {
+ if (isOpenedFromFooter) {
+ setActiveView('datetime');
+ } else {
+ setIsOpen(false);
+ }
+ }
+ },
+ [setActiveView, setIsOpen, isOpenedFromFooter],
+ );
+
+ return (
+ >;
+ setIsOpen: Dispatch>;
+ isOpenedFromFooter: boolean;
+}
+
+function TimezonePicker({
+ setActiveView,
+ setIsOpen,
+ isOpenedFromFooter,
+}: TimezonePickerProps): JSX.Element {
+ console.log({ isOpenedFromFooter });
+ const [searchTerm, setSearchTerm] = useState('');
+ const { timezone, updateTimezone } = useTimezone();
+ const [selectedTimezone, setSelectedTimezone] = useState(
+ timezone.name ?? TIMEZONE_DATA[0].name,
+ );
+
+ const getFilteredTimezones = useCallback((searchTerm: string): Timezone[] => {
+ const normalizedSearch = searchTerm.toLowerCase();
+ return TIMEZONE_DATA.filter(
+ (tz) =>
+ tz.name.toLowerCase().includes(normalizedSearch) ||
+ tz.offset.toLowerCase().includes(normalizedSearch) ||
+ tz.searchIndex.toLowerCase().includes(normalizedSearch),
+ );
+ }, []);
+
+ const handleCloseTimezonePicker = useCallback(() => {
+ if (isOpenedFromFooter) {
+ setActiveView('datetime');
+ } else {
+ setIsOpen(false);
+ }
+ }, [isOpenedFromFooter, setActiveView, setIsOpen]);
+
+ const handleTimezoneSelect = useCallback(
+ (timezone: Timezone) => {
+ setSelectedTimezone(timezone.name);
+ updateTimezone(timezone);
+ handleCloseTimezonePicker();
+ setIsOpen(false);
+ },
+ [handleCloseTimezonePicker, setIsOpen, updateTimezone],
+ );
+
+ // Register keyboard shortcuts
+ const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
+
+ useEffect(() => {
+ registerShortcut(
+ TimezonePickerShortcuts.CloseTimezonePicker,
+ handleCloseTimezonePicker,
+ );
+
+ return (): void => {
+ deregisterShortcut(TimezonePickerShortcuts.CloseTimezonePicker);
+ };
+ }, [deregisterShortcut, handleCloseTimezonePicker, registerShortcut]);
+
+ return (
+ (
(
{
@@ -80,11 +94,13 @@ const Graph = forwardRef(
dragSelectColor,
},
ref,
+ // eslint-disable-next-line sonarjs/cognitive-complexity
): JSX.Element => {
const nearestDatasetIndex = useRef(null);
const chartRef = useRef(null);
const isDarkMode = useIsDarkMode();
const gridTitle = useMemo(() => generateGridTitle(title), [title]);
+ const { timezone } = useTimezone();
const currentTheme = isDarkMode ? 'dark' : 'light';
const xAxisTimeUnit = useXAxisTimeUnit(data); // Computes the relevant time unit for x axis by analyzing the time stamp data
@@ -112,6 +128,22 @@ const Graph = forwardRef(
return 'rgba(231,233,237,0.8)';
}, [currentTheme]);
+ // Override Chart.js date adapter to use dayjs with timezone support
+ useEffect(() => {
+ _adapters._date.override({
+ format(time: number | Date, fmt: string) {
+ const dayjsTime = dayjs(time).tz(timezone.value);
+ const format = formatMap[fmt as keyof typeof formatMap];
+ if (!format) {
+ console.warn(`Missing datetime format for ${fmt}`);
+ return dayjsTime.format('YYYY-MM-DD HH:mm:ss'); // fallback format
+ }
+
+ return dayjsTime.format(format);
+ },
+ });
+ }, [timezone]);
+
const buildChart = useCallback(() => {
if (lineChartRef.current !== undefined) {
lineChartRef.current.destroy();
@@ -132,6 +164,7 @@ const Graph = forwardRef(
isStacked,
onClickHandler,
data,
+ timezone,
);
const chartHasData = hasData(data);
@@ -166,6 +199,7 @@ const Graph = forwardRef(
isStacked,
onClickHandler,
data,
+ timezone,
name,
type,
]);
diff --git a/frontend/src/components/Graph/utils.ts b/frontend/src/components/Graph/utils.ts
index f002d1402fa..603f3875663 100644
--- a/frontend/src/components/Graph/utils.ts
+++ b/frontend/src/components/Graph/utils.ts
@@ -1,5 +1,6 @@
import { Chart, ChartConfiguration, ChartData, Color } from 'chart.js';
import * as chartjsAdapter from 'chartjs-adapter-date-fns';
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
import dayjs from 'dayjs';
import { MutableRefObject } from 'react';
@@ -50,6 +51,7 @@ export const getGraphOptions = (
isStacked: boolean | undefined,
onClickHandler: GraphOnClickHandler | undefined,
data: ChartData,
+ timezone: Timezone,
// eslint-disable-next-line sonarjs/cognitive-complexity
): CustomChartOptions => ({
animation: {
@@ -97,7 +99,7 @@ export const getGraphOptions = (
callbacks: {
title(context): string | string[] {
const date = dayjs(context[0].parsed.x);
- return date.format('MMM DD, YYYY, HH:mm:ss');
+ return date.tz(timezone.value).format('MMM DD, YYYY, HH:mm:ss');
},
label(context): string | string[] {
let label = context.dataset.label || '';
diff --git a/frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss b/frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss
new file mode 100644
index 00000000000..925ec30f2a8
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss
@@ -0,0 +1,66 @@
+.host-containers {
+ gap: 24px;
+ height: 60vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ margin: 0 auto;
+ box-sizing: border-box;
+
+ .infra-container-card-container {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .dev-status-container {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .infra-container-card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .infra-container-card-text {
+ font-size: var(--font-size-sm);
+ color: var(--text-vanilla-400);
+ line-height: 20px;
+ letter-spacing: -0.07px;
+ width: 400px;
+ font-family: 'Inter';
+ margin-top: 12px;
+ font-weight: 300;
+ }
+
+ .infra-container-working-msg {
+ display: flex;
+ width: 400px;
+ padding: 12px;
+ align-items: flex-start;
+ gap: 12px;
+ border-radius: 4px;
+ background: rgba(171, 189, 255, 0.04);
+
+ .ant-space {
+ align-items: flex-start;
+ }
+ }
+
+ .infra-container-contact-support-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin: auto;
+ }
+}
+
+.lightMode {
+ .infra-container-card-text {
+ color: var(--text-ink-200);
+ }
+}
diff --git a/frontend/src/components/HostMetricsDetail/Containers/Containers.tsx b/frontend/src/components/HostMetricsDetail/Containers/Containers.tsx
new file mode 100644
index 00000000000..4dc01ff5e81
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/Containers/Containers.tsx
@@ -0,0 +1,44 @@
+import './Containers.styles.scss';
+
+import { Space, Typography } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
+const { Text } = Typography;
+
+function Containers(): JSX.Element {
+ const { t } = useTranslation(['infraMonitoring']);
+
+ return (
+
+
+ );
+}
+
+export default Containers;
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricDetail.interfaces.ts b/frontend/src/components/HostMetricsDetail/HostMetricDetail.interfaces.ts
new file mode 100644
index 00000000000..65d3bf44d89
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricDetail.interfaces.ts
@@ -0,0 +1,7 @@
+import { HostData } from 'api/infraMonitoring/getHostLists';
+
+export type HostDetailProps = {
+ host: HostData | null;
+ isModalTimeSelection: boolean;
+ onClose: () => void;
+};
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss
new file mode 100644
index 00000000000..2bcabd1b30d
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss
@@ -0,0 +1,193 @@
+.host-metric-traces {
+ margin-top: 1rem;
+
+ .host-metric-traces-header {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 1rem;
+
+ gap: 8px;
+ padding: 12px;
+ border-radius: 3px;
+ border: 1px solid var(--bg-slate-500);
+
+ .filter-section {
+ flex: 1;
+
+ .ant-select-selector {
+ border-radius: 2px;
+ border: 1px solid var(--bg-slate-400) !important;
+ background-color: var(--bg-ink-300) !important;
+
+ input {
+ font-size: 12px;
+ }
+
+ .ant-tag .ant-typography {
+ font-size: 12px;
+ }
+ }
+ }
+ }
+
+ .host-metric-traces-table {
+ .ant-table-content {
+ overflow: hidden !important;
+ }
+
+ .ant-table {
+ border-radius: 3px;
+ border: 1px solid var(--bg-slate-500);
+
+ .ant-table-thead > tr > th {
+ padding: 12px;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 18px;
+
+ background: rgba(171, 189, 255, 0.01);
+ border-bottom: none;
+
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.44px;
+ text-transform: uppercase;
+
+ &::before {
+ background-color: transparent;
+ }
+ }
+
+ .ant-table-thead > tr > th:has(.hostname-column-header) {
+ background: var(--bg-ink-400);
+ }
+
+ .ant-table-cell {
+ padding: 12px;
+ font-size: 13px;
+ line-height: 20px;
+ color: var(--bg-vanilla-100);
+ background: rgba(171, 189, 255, 0.01);
+ }
+
+ .ant-table-cell:has(.hostname-column-value) {
+ background: var(--bg-ink-400);
+ }
+
+ .hostname-column-value {
+ color: var(--bg-vanilla-100);
+ font-family: 'Geist Mono';
+ font-style: normal;
+ font-weight: 600;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .status-cell {
+ .active-tag {
+ color: var(--bg-forest-500);
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ }
+ }
+
+ .progress-container {
+ .ant-progress-bg {
+ height: 8px !important;
+ border-radius: 4px;
+ }
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: rgba(255, 255, 255, 0.04);
+ }
+
+ .ant-table-cell:first-child {
+ text-align: justify;
+ }
+
+ .ant-table-cell:nth-child(2) {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .ant-table-cell:nth-child(n + 3) {
+ padding-right: 24px;
+ }
+ .column-header-right {
+ text-align: right;
+ }
+ .ant-table-tbody > tr > td {
+ border-bottom: none;
+ }
+
+ .ant-table-thead
+ > tr
+ > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+ background-color: transparent;
+ }
+
+ .ant-empty-normal {
+ visibility: hidden;
+ }
+ }
+
+ .ant-table-container::after {
+ content: none;
+ }
+ }
+}
+
+.lightMode {
+ .host-metric-traces-header {
+ .filter-section {
+ border-top: 1px solid var(--bg-vanilla-300);
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .ant-select-selector {
+ border-color: var(--bg-vanilla-300) !important;
+ background-color: var(--bg-vanilla-100) !important;
+ color: var(--bg-ink-200);
+ }
+ }
+ }
+
+ .host-metric-traces-table {
+ .ant-table {
+ border-radius: 3px;
+ border: 1px solid var(--bg-vanilla-300);
+
+ .ant-table-thead > tr > th {
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+
+ .ant-table-thead > tr > th:has(.hostname-column-header) {
+ background: var(--bg-vanilla-100);
+ }
+
+ .ant-table-cell {
+ background: var(--bg-vanilla-100);
+ color: var(--bg-ink-500);
+ }
+
+ .ant-table-cell:has(.hostname-column-value) {
+ background: var(--bg-vanilla-100);
+ }
+
+ .hostname-column-value {
+ color: var(--bg-ink-300);
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: rgba(0, 0, 0, 0.04);
+ }
+ }
+ }
+}
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx
new file mode 100644
index 00000000000..2d4b7af903d
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx
@@ -0,0 +1,195 @@
+import './HostMetricTraces.styles.scss';
+
+import { ResizeTable } from 'components/ResizeTable';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { QueryParams } from 'constants/query';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { ErrorText } from 'container/TimeSeriesView/styles';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+ CustomTimeType,
+ Time,
+} from 'container/TopNav/DateTimeSelectionV2/config';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
+import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { getHostTracesQueryPayload, selectedColumns } from './constants';
+import { getListColumns } from './utils';
+
+interface Props {
+ timeRange: {
+ startTime: number;
+ endTime: number;
+ };
+ isModalTimeSelection: boolean;
+ handleTimeChange: (
+ interval: Time | CustomTimeType,
+ dateTimeRange?: [number, number],
+ ) => void;
+ handleChangeTracesFilters: (value: IBuilderQuery['filters']) => void;
+ tracesFilters: IBuilderQuery['filters'];
+ selectedInterval: Time;
+}
+
+function HostMetricTraces({
+ timeRange,
+ isModalTimeSelection,
+ handleTimeChange,
+ handleChangeTracesFilters,
+ tracesFilters,
+ selectedInterval,
+}: Props): JSX.Element {
+ const [traces, setTraces] = useState([]);
+ const [offset] = useState(0);
+
+ const { currentQuery } = useQueryBuilder();
+ const updatedCurrentQuery = useMemo(
+ () => ({
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: [
+ {
+ ...currentQuery.builder.queryData[0],
+ dataSource: DataSource.TRACES,
+ aggregateOperator: 'noop',
+ aggregateAttribute: {
+ ...currentQuery.builder.queryData[0].aggregateAttribute,
+ },
+ },
+ ],
+ },
+ }),
+ [currentQuery],
+ );
+
+ const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+ const { queryData: paginationQueryData } = useUrlQueryData(
+ QueryParams.pagination,
+ );
+
+ const queryPayload = useMemo(
+ () =>
+ getHostTracesQueryPayload(
+ timeRange.startTime,
+ timeRange.endTime,
+ paginationQueryData?.offset || offset,
+ tracesFilters,
+ ),
+ [
+ timeRange.startTime,
+ timeRange.endTime,
+ offset,
+ tracesFilters,
+ paginationQueryData,
+ ],
+ );
+
+ const { data, isLoading, isFetching, isError } = useQuery({
+ queryKey: [
+ 'hostMetricTraces',
+ timeRange.startTime,
+ timeRange.endTime,
+ offset,
+ tracesFilters,
+ DEFAULT_ENTITY_VERSION,
+ paginationQueryData,
+ ],
+ queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
+ enabled: !!queryPayload,
+ });
+
+ const traceListColumns = getListColumns(selectedColumns);
+
+ useEffect(() => {
+ if (data?.payload?.data?.newResult?.data?.result) {
+ const currentData = data.payload.data.newResult.data.result;
+ if (currentData.length > 0 && currentData[0].list) {
+ if (offset === 0) {
+ setTraces(currentData[0].list ?? []);
+ } else {
+ setTraces((prev) => [...prev, ...(currentData[0].list ?? [])]);
+ }
+ }
+ }
+ }, [data, offset]);
+
+ const isDataEmpty =
+ !isLoading && !isFetching && !isError && traces.length === 0;
+ const hasAdditionalFilters = tracesFilters.items.length > 1;
+
+ const totalCount =
+ data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
+
+ return (
+ = {
+ timestamp: 'Timestamp',
+ serviceName: 'Service Name',
+ name: 'Name',
+ durationNano: 'Duration',
+ httpMethod: 'HTTP Method',
+ responseStatusCode: 'Status Code',
+};
+
+export const getListColumns = (
+ selectedColumns: BaseAutocompleteData[],
+): ColumnsType => {
+ const columns: ColumnsType =
+ selectedColumns.map(({ dataType, key, type }) => ({
+ title: keyToLabelMap[key],
+ dataIndex: key,
+ key: `${key}-${dataType}-${type}`,
+ width: 145,
+ render: (value, item): JSX.Element => {
+ const itemData = item.data as any;
+
+ if (key === 'timestamp') {
+ const date =
+ typeof value === 'string'
+ ? dayjs(value).format('YYYY-MM-DD HH:mm:ss.SSS')
+ : dayjs(value / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
+
+ return (
+
+ {date}
+
+ );
+ }
+
+ if (value === '') {
+ return (
+
+ N/A
+
+ );
+ }
+
+ if (key === 'httpMethod' || key === 'responseStatusCode') {
+ return (
+
+
+ {itemData[key]}
+
+
+ );
+ }
+
+ if (key === 'durationNano') {
+ const durationNano = itemData[key];
+
+ return (
+
+ {getMs(durationNano)}ms
+
+ );
+ }
+
+ return (
+
+ {itemData[key]}
+
+ );
+ },
+ responsive: ['md'],
+ })) || [];
+
+ return columns;
+};
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss b/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
new file mode 100644
index 00000000000..511348c463c
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss
@@ -0,0 +1,232 @@
+.host-detail-drawer {
+ border-left: 1px solid var(--bg-slate-500);
+ background: var(--bg-ink-400);
+ box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+ .ant-drawer-header {
+ padding: 8px 16px;
+ border-bottom: none;
+
+ align-items: stretch;
+
+ border-bottom: 1px solid var(--bg-slate-500);
+ background: var(--bg-ink-400);
+ }
+
+ .ant-drawer-close {
+ margin-inline-end: 0px;
+ }
+
+ .ant-drawer-body {
+ display: flex;
+ flex-direction: column;
+ padding: 16px;
+ }
+
+ .title {
+ color: var(--text-vanilla-400);
+ font-family: 'Geist Mono';
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .radio-button {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: var(--padding-1);
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ }
+
+ .host-detail-drawer__host {
+ .host-details-grid {
+ .labels-row,
+ .values-row {
+ display: grid;
+ grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+ gap: 30px;
+ align-items: center;
+ }
+
+ .labels-row {
+ margin-bottom: 8px;
+ }
+
+ .host-details-metadata-label {
+ color: var(--text-vanilla-400);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.44px;
+ text-transform: uppercase;
+ }
+
+ .status-tag {
+ margin: 0;
+
+ &.active {
+ color: var(--success-500);
+ background: var(--success-100);
+ border-color: var(--success-500);
+ }
+
+ &.inactive {
+ color: var(--error-500);
+ background: var(--error-100);
+ border-color: var(--error-500);
+ }
+ }
+
+ .progress-container {
+ width: 158px;
+ .ant-progress {
+ margin: 0;
+
+ .ant-progress-text {
+ font-weight: 600;
+ }
+ }
+ }
+
+ .ant-card {
+ &.ant-card-bordered {
+ border: 1px solid var(--bg-slate-500) !important;
+ }
+ }
+ }
+ }
+
+ .tabs-and-search {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin: 16px 0;
+
+ .action-btn {
+ border-radius: 2px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ .views-tabs-container {
+ margin-top: 1.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .views-tabs {
+ color: var(--text-vanilla-400);
+
+ .view-title {
+ display: flex;
+ gap: var(--margin-2);
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-xs);
+ font-style: normal;
+ font-weight: var(--font-weight-normal);
+ }
+
+ .tab {
+ border: 1px solid var(--bg-slate-400);
+ width: 114px;
+ }
+
+ .tab::before {
+ background: var(--bg-slate-400);
+ }
+
+ .selected_view {
+ background: var(--bg-slate-300);
+ color: var(--text-vanilla-100);
+ border: 1px solid var(--bg-slate-400);
+ }
+
+ .selected_view::before {
+ background: var(--bg-slate-400);
+ }
+ }
+
+ .compass-button {
+ width: 30px;
+ height: 30px;
+
+ border-radius: 2px;
+ border: 1px solid var(--bg-slate-400);
+ background: var(--bg-ink-300);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ }
+ }
+ .ant-drawer-close {
+ padding: 0px;
+ }
+}
+
+.lightMode {
+ .ant-drawer-header {
+ border-bottom: 1px solid var(--bg-vanilla-400);
+ background: var(--bg-vanilla-100);
+ }
+
+ .host-detail-drawer {
+ .title {
+ color: var(--text-ink-300);
+ }
+
+ .host-detail-drawer__host {
+ .ant-typography {
+ color: var(--text-ink-300);
+ background: transparent;
+ }
+ }
+
+ .radio-button {
+ border: 1px solid var(--bg-vanilla-400);
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+
+ .views-tabs {
+ .tab {
+ background: var(--bg-vanilla-100);
+ }
+
+ .selected_view {
+ background: var(--bg-vanilla-300);
+ border: 1px solid var(--bg-slate-300);
+ color: var(--text-ink-400);
+ }
+
+ .selected_view::before {
+ background: var(--bg-vanilla-300);
+ border-left: 1px solid var(--bg-slate-300);
+ }
+ }
+
+ .compass-button {
+ border: 1px solid var(--bg-vanilla-300);
+ background: var(--bg-vanilla-100);
+ box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+ }
+
+ .tabs-and-search {
+ .action-btn {
+ border: 1px solid var(--bg-vanilla-400);
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+ }
+ }
+}
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
new file mode 100644
index 00000000000..ee61e687cb3
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx
@@ -0,0 +1,517 @@
+import './HostMetricsDetail.styles.scss';
+
+import { Color, Spacing } from '@signozhq/design-tokens';
+import {
+ Button,
+ Divider,
+ Drawer,
+ Progress,
+ Radio,
+ Tag,
+ Typography,
+} from 'antd';
+import { RadioChangeEvent } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { QueryParams } from 'constants/query';
+import {
+ initialQueryBuilderFormValuesMap,
+ initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import {
+ CustomTimeType,
+ Time,
+} from 'container/TopNav/DateTimeSelectionV2/config';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import {
+ BarChart2,
+ ChevronsLeftRight,
+ Compass,
+ DraftingCompass,
+ Package2,
+ ScrollText,
+ X,
+} from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { AppState } from 'store/reducers';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+ IBuilderQuery,
+ TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+ LogsAggregatorOperator,
+ TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { v4 as uuidv4 } from 'uuid';
+
+import { VIEW_TYPES, VIEWS } from './constants';
+import Containers from './Containers/Containers';
+import { HostDetailProps } from './HostMetricDetail.interfaces';
+import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailedView';
+import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
+import Metrics from './Metrics/Metrics';
+import Processes from './Processes/Processes';
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function HostMetricsDetails({
+ host,
+ onClose,
+ isModalTimeSelection,
+}: HostDetailProps): JSX.Element {
+ const { maxTime, minTime, selectedTime } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
+
+ const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
+ minTime,
+ ]);
+ const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [
+ maxTime,
+ ]);
+
+ const urlQuery = useUrlQuery();
+
+ const [modalTimeRange, setModalTimeRange] = useState(() => ({
+ startTime: startMs,
+ endTime: endMs,
+ }));
+
+ const [selectedInterval, setSelectedInterval] = useState
)}
);
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
index c46d9975f46..34bdd0508e3 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss
@@ -8,6 +8,7 @@
display: flex;
align-items: center;
justify-content: space-between;
+ cursor: pointer;
.left-action {
display: flex;
diff --git a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
index dcf3cc8f3e0..bd8b9b1d388 100644
--- a/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
+++ b/frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx
@@ -396,23 +396,22 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
return (
- {isLogsExplorerPage && (
-
- )}
- {options.map((option) => (
-
- ))}
+ <>
+
+
);
}
diff --git a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
index 24ba0e2b019..862d63e9227 100644
--- a/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
+++ b/frontend/src/components/CustomTimePicker/RangePickerModal.tsx
@@ -3,7 +3,8 @@ 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 dayjs from 'dayjs';
+import { useTimezone } from 'providers/Timezone';
import { Dispatch, SetStateAction } from 'react';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
@@ -31,7 +32,10 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
(state) => state.globalTime,
);
- const disabledDate = (current: Dayjs): boolean => {
+ // Using any type here because antd's DatePicker expects its own internal Dayjs type
+ // which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+ const disabledDate = (current: any): boolean => {
const currentDay = dayjs(current);
return currentDay.isAfter(dayjs());
};
@@ -49,16 +53,22 @@ function RangePickerModal(props: RangePickerModalProps): JSX.Element {
}
onCustomDateHandler(date_time, LexicalContext.CUSTOM_DATE_PICKER);
};
+
+ const { timezone } = useTimezone();
return (
+
-
+ {isLogsExplorerPage && (
+
+ )}
+ {options.map((option) => (
+
+ ))}
+
+
+ {selectedTime === 'custom' || customDateTimeVisible ? (
+
+
+ )}
+ RELATIVE TIMES
+ {getTimeChips(RelativeDurationSuggestionOptions)}
+
- {selectedTime === 'custom' || customDateTimeVisible ? (
-
+
-
+
-
- )}
+ Current timezone
+ RELATIVE TIMES
- {getTimeChips(RelativeDurationSuggestionOptions)}
- ⎯
+
+
+
+ );
+}
+
+function TimezoneItem({
+ timezone,
+ isSelected = false,
+ onClick,
+}: TimezoneItemProps): JSX.Element {
+ return (
+
+ );
+}
+
+TimezoneItem.defaultProps = {
+ isSelected: false,
+ onClick: undefined,
+};
+
+interface TimezonePickerProps {
+ setActiveView: Dispatch
+
+ esc
+
+
+ );
+}
+
+export default TimezonePicker;
diff --git a/frontend/src/components/CustomTimePicker/timezoneUtils.ts b/frontend/src/components/CustomTimePicker/timezoneUtils.ts
new file mode 100644
index 00000000000..92da405ba48
--- /dev/null
+++ b/frontend/src/components/CustomTimePicker/timezoneUtils.ts
@@ -0,0 +1,152 @@
+import dayjs from 'dayjs';
+import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export interface Timezone {
+ name: string;
+ value: string;
+ offset: string;
+ searchIndex: string;
+ hasDivider?: boolean;
+}
+
+const TIMEZONE_TYPES = {
+ BROWSER: 'BROWSER',
+ UTC: 'UTC',
+ STANDARD: 'STANDARD',
+} as const;
+
+type TimezoneType = typeof TIMEZONE_TYPES[keyof typeof TIMEZONE_TYPES];
+
+export const UTC_TIMEZONE: Timezone = {
+ name: 'Coordinated Universal Time — UTC, GMT',
+ value: 'UTC',
+ offset: 'UTC',
+ searchIndex: 'UTC',
+ hasDivider: true,
+};
+
+const normalizeTimezoneName = (timezone: string): string => {
+ // https://github.com/tc39/proposal-temporal/issues/1076
+ if (timezone === 'Asia/Calcutta') {
+ return 'Asia/Kolkata';
+ }
+ return timezone;
+};
+
+const formatOffset = (offsetMinutes: number): string => {
+ if (offsetMinutes === 0) return 'UTC';
+
+ const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+ const minutes = Math.abs(offsetMinutes) % 60;
+ const sign = offsetMinutes > 0 ? '+' : '-';
+
+ return `UTC ${sign} ${hours}${
+ minutes ? `:${minutes.toString().padStart(2, '0')}` : ':00'
+ }`;
+};
+
+const createTimezoneEntry = (
+ name: string,
+ offsetMinutes: number,
+ type: TimezoneType = TIMEZONE_TYPES.STANDARD,
+ hasDivider = false,
+): Timezone => {
+ const offset = formatOffset(offsetMinutes);
+ let value = name;
+ let displayName = name;
+
+ switch (type) {
+ case TIMEZONE_TYPES.BROWSER:
+ displayName = `Browser time — ${name}`;
+ value = name;
+ break;
+ case TIMEZONE_TYPES.UTC:
+ displayName = 'Coordinated Universal Time — UTC, GMT';
+ value = 'UTC';
+ break;
+ case TIMEZONE_TYPES.STANDARD:
+ displayName = name;
+ value = name;
+ break;
+ default:
+ console.error(`Invalid timezone type: ${type}`);
+ }
+
+ return {
+ name: displayName,
+ value,
+ offset,
+ searchIndex: offset.replace(/ /g, ''),
+ ...(hasDivider && { hasDivider }),
+ };
+};
+
+const getOffsetByTimezone = (timezone: string): number => {
+ const dayjsTimezone = dayjs().tz(timezone);
+ return dayjsTimezone.utcOffset();
+};
+
+export const getBrowserTimezone = (): Timezone => {
+ const browserTz = dayjs.tz.guess();
+ const normalizedTz = normalizeTimezoneName(browserTz);
+ const browserOffset = getOffsetByTimezone(normalizedTz);
+ return createTimezoneEntry(
+ normalizedTz,
+ browserOffset,
+ TIMEZONE_TYPES.BROWSER,
+ );
+};
+
+const filterAndSortTimezones = (
+ allTimezones: string[],
+ browserTzName?: string,
+ includeEtcTimezones = false,
+): Timezone[] =>
+ allTimezones
+ .filter((tz) => {
+ const isNotBrowserTz = tz !== browserTzName;
+ const isNotEtcTz = includeEtcTimezones || !tz.startsWith('Etc/');
+ return isNotBrowserTz && isNotEtcTz;
+ })
+ .sort((a, b) => a.localeCompare(b))
+ .map((tz) => {
+ const normalizedTz = normalizeTimezoneName(tz);
+ const offset = getOffsetByTimezone(normalizedTz);
+ return createTimezoneEntry(normalizedTz, offset);
+ });
+
+const generateTimezoneData = (includeEtcTimezones = false): Timezone[] => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const allTimezones = (Intl as any).supportedValuesOf('timeZone');
+ const timezones: Timezone[] = [];
+
+ // Add browser timezone
+ const browserTzObject = getBrowserTimezone();
+ timezones.push(browserTzObject);
+
+ // Add UTC timezone with divider
+ timezones.push(UTC_TIMEZONE);
+
+ timezones.push(
+ ...filterAndSortTimezones(
+ allTimezones,
+ browserTzObject.value,
+ includeEtcTimezones,
+ ),
+ );
+
+ return timezones;
+};
+
+export const getTimezoneObjectByTimezoneString = (
+ timezone: string,
+): Timezone => {
+ const utcOffset = getOffsetByTimezone(timezone);
+ return createTimezoneEntry(timezone, utcOffset);
+};
+
+export const TIMEZONE_DATA = generateTimezoneData();
diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx
index 0065f6b33c3..6358ebfe7a8 100644
--- a/frontend/src/components/Graph/index.tsx
+++ b/frontend/src/components/Graph/index.tsx
@@ -1,4 +1,5 @@
import {
+ _adapters,
BarController,
BarElement,
CategoryScale,
@@ -18,8 +19,10 @@ import {
} from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import { generateGridTitle } from 'container/GridPanelSwitch/utils';
+import dayjs from 'dayjs';
import { useIsDarkMode } from 'hooks/useDarkMode';
import isEqual from 'lodash-es/isEqual';
+import { useTimezone } from 'providers/Timezone';
import {
forwardRef,
memo,
@@ -62,6 +65,17 @@ Chart.register(
Tooltip.positioners.custom = TooltipPositionHandler;
+// Map of Chart.js time formats to dayjs format strings
+const formatMap = {
+ 'HH:mm:ss': 'HH:mm:ss',
+ 'HH:mm': 'HH:mm',
+ 'MM/DD HH:mm': 'MM/DD HH:mm',
+ 'MM/dd HH:mm': 'MM/DD HH:mm',
+ 'MM/DD': 'MM/DD',
+ 'YY-MM': 'YY-MM',
+ YY: 'YY',
+};
+
const Graph = forwardRef
+ {getFilteredTimezones(searchTerm).map((timezone) => (
+ handleTimezoneSelect(timezone)}
+ />
+ ))}
+
+
+
+
+
+
+
+ 
+
+
+ {t('containers_visualization_message')}
+
+
+
+
+
+
+
+ 
+ {t('working_message')}
+
+
+
+
+ {data?.error || 'Something went wrong'} }
+
+ {isLoading && traces.length === 0 &&
+ );
+}
+
+export default HostMetricTraces;
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts b/frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts
new file mode 100644
index 00000000000..8e2a3d62388
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts
@@ -0,0 +1,200 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+ BaseAutocompleteData,
+ DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource } from 'types/common/queryBuilder';
+import { nanoToMilli } from 'utils/timeUtils';
+
+export const columns = [
+ {
+ dataIndex: 'timestamp',
+ key: 'timestamp',
+ title: 'Timestamp',
+ width: 200,
+ render: (timestamp: string): string => new Date(timestamp).toLocaleString(),
+ },
+ {
+ title: 'Service Name',
+ dataIndex: ['data', 'serviceName'],
+ key: 'serviceName-string-tag',
+ width: 150,
+ },
+ {
+ title: 'Name',
+ dataIndex: ['data', 'name'],
+ key: 'name-string-tag',
+ width: 145,
+ },
+ {
+ title: 'Duration',
+ dataIndex: ['data', 'durationNano'],
+ key: 'durationNano-float64-tag',
+ width: 145,
+ render: (duration: number): string => `${nanoToMilli(duration)}ms`,
+ },
+ {
+ title: 'HTTP Method',
+ dataIndex: ['data', 'httpMethod'],
+ key: 'httpMethod-string-tag',
+ width: 145,
+ },
+ {
+ title: 'Status Code',
+ dataIndex: ['data', 'responseStatusCode'],
+ key: 'responseStatusCode-string-tag',
+ width: 145,
+ },
+];
+
+export const selectedColumns: BaseAutocompleteData[] = [
+ {
+ key: 'timestamp',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ },
+ {
+ key: 'serviceName',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ },
+ {
+ key: 'name',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ },
+ {
+ key: 'durationNano',
+ dataType: DataTypes.Float64,
+ type: 'tag',
+ isColumn: true,
+ },
+ {
+ key: 'httpMethod',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ },
+ {
+ key: 'responseStatusCode',
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: true,
+ },
+];
+
+export const getHostTracesQueryPayload = (
+ start: number,
+ end: number,
+ offset = 0,
+ filters: IBuilderQuery['filters'],
+): GetQueryResultsProps => ({
+ query: {
+ promql: [],
+ clickhouse_sql: [],
+ builder: {
+ queryData: [
+ {
+ dataSource: DataSource.TRACES,
+ queryName: 'A',
+ aggregateOperator: 'noop',
+ aggregateAttribute: {
+ id: '------false',
+ dataType: DataTypes.EMPTY,
+ key: '',
+ isColumn: false,
+ type: '',
+ isJSON: false,
+ },
+ timeAggregation: 'rate',
+ spaceAggregation: 'sum',
+ functions: [],
+ filters,
+ expression: 'A',
+ disabled: false,
+ stepInterval: 60,
+ having: [],
+ limit: null,
+ orderBy: [
+ {
+ columnName: 'timestamp',
+ order: 'desc',
+ },
+ ],
+ groupBy: [],
+ legend: '',
+ reduceTo: 'avg',
+ },
+ ],
+ queryFormulas: [],
+ },
+ id: '572f1d91-6ac0-46c0-b726-c21488b34434',
+ queryType: EQueryType.QUERY_BUILDER,
+ },
+ graphType: PANEL_TYPES.LIST,
+ selectedTime: 'GLOBAL_TIME',
+ start,
+ end,
+ params: {
+ dataSource: DataSource.TRACES,
+ },
+ tableParams: {
+ pagination: {
+ limit: 10,
+ offset,
+ },
+ selectColumns: [
+ {
+ key: 'serviceName',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'serviceName--string--tag--true',
+ isIndexed: false,
+ },
+ {
+ key: 'name',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'name--string--tag--true',
+ isIndexed: false,
+ },
+ {
+ key: 'durationNano',
+ dataType: 'float64',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'durationNano--float64--tag--true',
+ isIndexed: false,
+ },
+ {
+ key: 'httpMethod',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'httpMethod--string--tag--true',
+ isIndexed: false,
+ },
+ {
+ key: 'responseStatusCode',
+ dataType: 'string',
+ type: 'tag',
+ isColumn: true,
+ isJSON: false,
+ id: 'responseStatusCode--string--tag--true',
+ isIndexed: false,
+ },
+ ],
+ },
+});
diff --git a/frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx b/frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx
new file mode 100644
index 00000000000..aba284586ad
--- /dev/null
+++ b/frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx
@@ -0,0 +1,84 @@
+import { Tag, Typography } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
+import {
+ BlockLink,
+ getTraceLink,
+} from 'container/TracesExplorer/ListView/utils';
+import dayjs from 'dayjs';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+
+const keyToLabelMap: Record
+
+
+ {isError &&
+ {query && (
+
+
+
+
+
+ )}
+
-
+ {
+ if (isOpen) {
+ setIsOpen(false);
+ setVisibleItemsCount(10);
+ } else {
+ setIsOpen(true);
+ }
+ }}
+ >
{isOpen ? (
- {
- setIsOpen(false);
- setVisibleItemsCount(10);
- }}
- />
+ setIsOpen(true)}
- cursor="pointer"
- />
+ {filter.title}
@@ -420,7 +419,11 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
{isOpen && (
{
+ e.stopPropagation();
+ e.preventDefault();
+ handleClearFilterAttribute();
+ }}
>
Clear All
diff --git a/frontend/src/components/ResizeTable/TableComponent/Time.tsx b/frontend/src/components/ResizeTable/TableComponent/Time.tsx
index e579dbdfdac..062dafcc2ea 100644
--- a/frontend/src/components/ResizeTable/TableComponent/Time.tsx
+++ b/frontend/src/components/ResizeTable/TableComponent/Time.tsx
@@ -1,11 +1,13 @@
import { Typography } from 'antd';
-import convertDateToAmAndPm from 'lib/convertDateToAmAndPm';
-import getFormattedDate from 'lib/getFormatedDate';
+import { useTimezone } from 'providers/Timezone';
function Time({ CreatedOrUpdateTime }: DateProps): JSX.Element {
+ const { formatTimezoneAdjustedTimestamp } = useTimezone();
const time = new Date(CreatedOrUpdateTime);
- const date = getFormattedDate(time);
- const timeString = `${date} ${convertDateToAmAndPm(time)}`;
+ const timeString = formatTimezoneAdjustedTimestamp(
+ time,
+ 'MM/DD/YYYY hh:mm:ss A (UTC Z)',
+ );
return {timeString} ;
}
diff --git a/frontend/src/components/RouteTab/index.tsx b/frontend/src/components/RouteTab/index.tsx
index c76e3e2f999..0624a237386 100644
--- a/frontend/src/components/RouteTab/index.tsx
+++ b/frontend/src/components/RouteTab/index.tsx
@@ -11,7 +11,7 @@ function RouteTab({
}: RouteTabProps & TabsProps): JSX.Element {
const onChange = (activeRoute: string): void => {
if (onChangeHandler) {
- onChangeHandler();
+ onChangeHandler(activeRoute);
}
const selectedRoute = routes.find((e) => e.key === activeRoute);
diff --git a/frontend/src/components/RouteTab/types.ts b/frontend/src/components/RouteTab/types.ts
index c8fd2af276d..a4dada0daf4 100644
--- a/frontend/src/components/RouteTab/types.ts
+++ b/frontend/src/components/RouteTab/types.ts
@@ -11,6 +11,6 @@ export type TabRoutes = {
export interface RouteTabProps {
routes: TabRoutes[];
activeKey: TabsProps['activeKey'];
- onChangeHandler?: VoidFunction;
+ onChangeHandler?: (key: string) => void;
history: History;
}
diff --git a/frontend/src/constants/localStorage.ts b/frontend/src/constants/localStorage.ts
index 4e6859a2ddb..5284fc92ade 100644
--- a/frontend/src/constants/localStorage.ts
+++ b/frontend/src/constants/localStorage.ts
@@ -21,4 +21,5 @@ export enum LOCALSTORAGE {
THEME_ANALYTICS_V1 = 'THEME_ANALYTICS_V1',
LAST_USED_SAVED_VIEWS = 'LAST_USED_SAVED_VIEWS',
SHOW_LOGS_QUICK_FILTERS = 'SHOW_LOGS_QUICK_FILTERS',
+ PREFERRED_TIMEZONE = 'PREFERRED_TIMEZONE',
}
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
index 1dbacde963e..36cf99157e9 100644
--- a/frontend/src/constants/reactQueryKeys.ts
+++ b/frontend/src/constants/reactQueryKeys.ts
@@ -18,5 +18,7 @@ export const REACT_QUERY_KEY = {
GET_ALL_ALLERTS: 'GET_ALL_ALLERTS',
REMOVE_ALERT_RULE: 'REMOVE_ALERT_RULE',
DUPLICATE_ALERT_RULE: 'DUPLICATE_ALERT_RULE',
+ GET_HOST_LIST: 'GET_HOST_LIST',
UPDATE_ALERT_RULE: 'UPDATE_ALERT_RULE',
+ GET_ACTIVE_LICENSE_V3: 'GET_ACTIVE_LICENSE_V3',
};
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index 3c17336889b..7b2911dbd6d 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -55,10 +55,12 @@ const ROUTES = {
LOGS_SAVE_VIEWS: '/logs/saved-views',
TRACES_SAVE_VIEWS: '/traces/saved-views',
WORKSPACE_LOCKED: '/workspace-locked',
+ WORKSPACE_SUSPENDED: '/workspace-suspended',
SHORTCUTS: '/shortcuts',
INTEGRATIONS: '/integrations',
MESSAGING_QUEUES: '/messaging-queues',
MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
+ INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
} as const;
export default ROUTES;
diff --git a/frontend/src/constants/shortcuts/TimezonePickerShortcuts.ts b/frontend/src/constants/shortcuts/TimezonePickerShortcuts.ts
new file mode 100644
index 00000000000..b7627e6e3d2
--- /dev/null
+++ b/frontend/src/constants/shortcuts/TimezonePickerShortcuts.ts
@@ -0,0 +1,3 @@
+export const TimezonePickerShortcuts = {
+ CloseTimezonePicker: 'escape',
+};
diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
index 85857605f8f..6be7a26db1a 100644
--- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
+++ b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx
@@ -1,10 +1,16 @@
import { Color } from '@signozhq/design-tokens';
import { Progress, Table } from 'antd';
import { ColumnsType } from 'antd/es/table';
+import logEvent from 'api/common/logEvent';
import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
-import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+import { HTMLAttributes } from 'react';
+import {
+ AlertRuleStats,
+ AlertRuleTimelineTableResponse,
+ AlertRuleTopContributors,
+} from 'types/api/alerts/def';
function TopContributorsRows({
topContributors,
@@ -70,10 +76,21 @@ function TopContributorsRows({
},
];
+ const handleRowClick = (
+ record: AlertRuleTopContributors,
+ ): HTMLAttributes => ({
+ onClick: (): void => {
+ logEvent('Alert history: Top contributors row: Clicked', {
+ labels: record.labels,
+ });
+ },
+ });
+
return (
`top-contributor-${row.fingerprint}`}
+ onRow={handleRowClick}
columns={columns}
showHeader={false}
dataSource={topContributors}
diff --git a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
index b3eecda24cd..6a09298fd39 100644
--- a/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
+++ b/frontend/src/container/AlertHistory/Timeline/Graph/Graph.tsx
@@ -7,6 +7,7 @@ import useUrlQuery from 'hooks/useUrlQuery';
import history from 'lib/history';
import heatmapPlugin from 'lib/uPlotLib/plugins/heatmapPlugin';
import timelinePlugin from 'lib/uPlotLib/plugins/timelinePlugin';
+import { useTimezone } from 'providers/Timezone';
import { useMemo, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { UpdateTimeInterval } from 'store/actions';
@@ -48,6 +49,7 @@ function HorizontalTimelineGraph({
const urlQuery = useUrlQuery();
const dispatch = useDispatch();
+ const { timezone } = useTimezone();
const options: uPlot.Options = useMemo(
() => ({
@@ -116,8 +118,18 @@ function HorizontalTimelineGraph({
}),
]
: [],
+
+ tzDate: (timestamp: number): Date =>
+ uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
}),
- [width, isDarkMode, transformedData.length, urlQuery, dispatch],
+ [
+ width,
+ isDarkMode,
+ transformedData.length,
+ urlQuery,
+ dispatch,
+ timezone.value,
+ ],
);
return
+
+ 
+
+ {noData && (
+ 
+
+
+
+ );
+}
+
+export default HostsListControls;
diff --git a/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss b/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss
new file mode 100644
index 00000000000..c1594d49293
--- /dev/null
+++ b/frontend/src/container/InfraMonitoringHosts/InfraMonitoring.styles.scss
@@ -0,0 +1,337 @@
+.infra-monitoring-container {
+ display: flex;
+ height: 100%;
+ flex-direction: column;
+
+ .infra-monitoring-header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ margin-bottom: 16px;
+ }
+
+ .hosts-list-controls {
+ padding: 8px;
+
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 16px;
+
+ .ant-select-selector {
+ border-radius: 2px;
+ border: 1px solid var(--bg-slate-400) !important;
+ background-color: var(--bg-ink-300) !important;
+
+ input {
+ font-size: 12px;
+ }
+
+ .ant-tag .ant-typography {
+ font-size: 12px;
+ }
+ }
+
+ .hosts-list-controls-left {
+ flex: 1;
+ }
+ }
+
+ .progress-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .progress-bar {
+ flex: 1;
+ margin-right: 8px;
+ }
+
+ .clickable-row {
+ cursor: pointer;
+ }
+
+ .hosts-list-table {
+ .ant-table {
+ .ant-table-thead > tr > th {
+ padding: 12px;
+ font-weight: 500;
+ font-size: 12px;
+ line-height: 18px;
+
+ background: var(--bg-ink-500);
+ border-bottom: none;
+
+ color: var(--Vanilla-400, #c0c1c3);
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.44px;
+ text-transform: uppercase;
+
+ &::before {
+ background-color: transparent;
+ }
+ }
+
+ .ant-table-thead > tr > th:has(.hostname-column-header) {
+ background: var(--bg-ink-400);
+ }
+
+ .ant-table-cell {
+ padding: 12px;
+ font-size: 13px;
+ line-height: 20px;
+ color: var(--bg-vanilla-100);
+ background: var(--bg-ink-500);
+ }
+
+ .ant-table-cell:has(.hostname-column-value) {
+ background: var(--bg-ink-400);
+ }
+
+ .hostname-column-value {
+ color: var(--Vanilla-100, #fff);
+ font-family: 'Geist Mono';
+ font-style: normal;
+ font-weight: 600;
+ line-height: 20px; /* 142.857% */
+ letter-spacing: -0.07px;
+ }
+
+ .status-cell {
+ .active-tag {
+ color: var(--bg-forest-500);
+ padding: 4px 8px;
+ border-radius: 4px;
+ font-size: 12px;
+ font-weight: 500;
+ }
+ }
+
+ .progress-container {
+ .ant-progress-bg {
+ height: 8px !important;
+ border-radius: 4px;
+ }
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: rgba(255, 255, 255, 0.04);
+ }
+
+ .ant-table-cell:first-child {
+ text-align: justify;
+ }
+
+ .ant-table-cell:nth-child(2) {
+ padding-left: 16px;
+ padding-right: 16px;
+ }
+
+ .ant-table-cell:nth-child(n + 3) {
+ padding-right: 24px;
+ }
+ .column-header-right {
+ text-align: right;
+ }
+ .ant-table-tbody > tr > td {
+ border-bottom: none;
+ }
+
+ .ant-table-thead
+ > tr
+ > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+ background-color: transparent;
+ }
+
+ .ant-empty-normal {
+ visibility: hidden;
+ }
+ }
+
+ .ant-pagination {
+ position: fixed;
+ bottom: 0;
+ width: calc(100% - 64px);
+ background: var(--bg-ink-500);
+ padding: 16px;
+ margin: 0;
+
+ // this is to offset intercom icon till we improve the design
+ padding-right: 72px;
+
+ .ant-pagination-item {
+ border-radius: 4px;
+
+ &-active {
+ background: var(--bg-robin-500);
+ border-color: var(--bg-robin-500);
+
+ a {
+ color: var(--bg-ink-500) !important;
+ }
+ }
+ }
+ }
+ }
+}
+
+.infra-monitoring-tags {
+ width: fit-content;
+
+ font-family: Inter;
+ font-size: 11px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 18px; /* 163.636% */
+ letter-spacing: 0.44px;
+ text-transform: uppercase;
+
+ border-radius: 50px;
+ padding: 2px 8px;
+
+ &.active {
+ color: var(--Forest-500, #25e192);
+ border: 1px solid rgba(37, 225, 146, 0.2);
+ background: rgba(37, 225, 146, 0.1);
+ }
+
+ &.inactive {
+ color: var(--Slate-50, #62687c);
+ border: 1px solid rgba(98, 104, 124, 0.2);
+ background: rgba(98, 104, 124, 0.1);
+ }
+}
+
+.hosts-list-loading-state {
+ padding: 8px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+
+ .hosts-list-loading-state-item {
+ height: 48px;
+ width: 100%;
+ }
+}
+
+.no-filtered-hosts-message-container {
+ height: 30vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .no-filtered-hosts-message-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+
+ width: fit-content;
+ padding: 24px;
+ }
+
+ .no-filtered-hosts-message {
+ margin-top: 8px;
+ }
+}
+
+.hosts-empty-state-container {
+ padding: 16px;
+ height: 40vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .hosts-empty-state-container-content {
+ padding: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+
+ width: fit-content;
+
+ .no-hosts-message {
+ margin-bottom: 16px;
+
+ .no-hosts-message-title {
+ margin-top: 8px;
+ margin-bottom: 4px;
+ }
+ }
+ }
+}
+
+.lightMode {
+ .infra-monitoring-container {
+ .ant-table-thead > tr > th {
+ background: var(--bg-vanilla-100);
+ color: var(--bg-ink-500);
+ }
+
+ .ant-table-cell {
+ color: var(--bg-ink-500);
+ }
+ .hosts-list-controls {
+ border-top: 1px solid var(--bg-vanilla-300);
+ border-bottom: 1px solid var(--bg-vanilla-300);
+
+ .ant-select-selector {
+ border-color: var(--bg-vanilla-300) !important;
+ background-color: var(--bg-vanilla-100) !important;
+ color: var(--bg-ink-200);
+ }
+ }
+ }
+
+ .hosts-list-table {
+ .ant-table {
+ .ant-table-thead > tr > th {
+ background: var(--bg-vanilla-100);
+ color: var(--text-ink-300);
+ }
+
+ .ant-table-thead > tr > th:has(.hostname-column-header) {
+ background: var(--bg-vanilla-100);
+ }
+
+ .ant-table-cell {
+ background: var(--bg-vanilla-100);
+ color: var(--bg-ink-500);
+ }
+
+ .ant-table-cell:has(.hostname-column-value) {
+ background: var(--bg-vanilla-100);
+ }
+
+ .hostname-column-value {
+ color: var(--bg-ink-300);
+ }
+
+ .ant-table-tbody > tr:hover > td {
+ background: rgba(0, 0, 0, 0.04);
+ }
+ }
+
+ .ant-pagination {
+ background: var(--bg-vanilla-100);
+
+ .ant-pagination-item {
+ &-active {
+ background: var(--bg-robin-500);
+ border-color: var(--bg-robin-500);
+
+ a {
+ color: var(--bg-vanilla-100) !important;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/frontend/src/container/InfraMonitoringHosts/index.tsx b/frontend/src/container/InfraMonitoringHosts/index.tsx
new file mode 100644
index 00000000000..b2e9fb89938
--- /dev/null
+++ b/frontend/src/container/InfraMonitoringHosts/index.tsx
@@ -0,0 +1,75 @@
+import './InfraMonitoring.styles.scss';
+
+import * as Sentry from '@sentry/react';
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
+import { useEffect } from 'react';
+import { DataSource } from 'types/common/queryBuilder';
+
+import HostsList from './HostsList';
+
+function InfraMonitoringHosts(): JSX.Element {
+ const {
+ updateAllQueriesOperators,
+ handleSetConfig,
+ setSupersetQuery,
+ setLastUsedQuery,
+ currentQuery,
+ resetQuery,
+ } = useQueryBuilder();
+
+ useEffect(() => {
+ const newQuery = updateAllQueriesOperators(
+ initialQueriesMap.metrics,
+ PANEL_TYPES.TIME_SERIES,
+ DataSource.METRICS,
+ );
+
+ setSupersetQuery(newQuery);
+ setLastUsedQuery(0);
+ handleSetConfig(PANEL_TYPES.TIME_SERIES, DataSource.METRICS);
+
+ return (): void => {
+ setLastUsedQuery(0);
+ };
+ }, [
+ updateAllQueriesOperators,
+ setSupersetQuery,
+ setLastUsedQuery,
+ handleSetConfig,
+ ]);
+
+ useEffect(() => {
+ const updatedCurrentQuery = {
+ ...currentQuery,
+ builder: {
+ ...currentQuery.builder,
+ queryData: [
+ {
+ ...currentQuery.builder.queryData[0],
+ filters: {
+ items: [],
+ op: 'AND',
+ },
+ },
+ ],
+ },
+ };
+
+ resetQuery(updatedCurrentQuery);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default InfraMonitoringHosts;
diff --git a/frontend/src/container/InfraMonitoringHosts/utils.tsx b/frontend/src/container/InfraMonitoringHosts/utils.tsx
new file mode 100644
index 00000000000..e25b4d41857
--- /dev/null
+++ b/frontend/src/container/InfraMonitoringHosts/utils.tsx
@@ -0,0 +1,133 @@
+import './InfraMonitoring.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Progress, TabsProps, Tag } from 'antd';
+import { ColumnType } from 'antd/es/table';
+import { HostData, HostListPayload } from 'api/infraMonitoring/getHostLists';
+import TabLabel from 'components/TabLabel';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+
+import HostsList from './HostsList';
+
+export interface HostRowData {
+ hostName: string;
+ cpu: React.ReactNode;
+ memory: React.ReactNode;
+ wait: string;
+ load15: number;
+ active: React.ReactNode;
+}
+
+export const getHostListsQuery = (): HostListPayload => ({
+ filters: {
+ items: [],
+ op: 'and',
+ },
+ groupBy: [],
+ orderBy: { columnName: 'cpu', order: 'desc' },
+});
+export const getTabsItems = (): TabsProps['items'] => [
+ {
+ label:
+
+ Hostname
,
+ dataIndex: 'hostName',
+ key: 'hostName',
+ width: 250,
+ render: (value: string): React.ReactNode => (
+ {value}
+ ),
+ },
+ {
+ title: 'Status',
+ dataIndex: 'active',
+ key: 'active',
+ width: 100,
+ },
+ {
+ title: CPU Usage
,
+ dataIndex: 'cpu',
+ key: 'cpu',
+ width: 100,
+ sorter: true,
+ align: 'right',
+ },
+ {
+ title: Memory Usage
,
+ dataIndex: 'memory',
+ key: 'memory',
+ width: 100,
+ sorter: true,
+ align: 'right',
+ },
+ {
+ title: IOWait
,
+ dataIndex: 'wait',
+ key: 'wait',
+ width: 100,
+ sorter: true,
+ align: 'right',
+ },
+ {
+ title: Load Avg
,
+ dataIndex: 'load15',
+ key: 'load15',
+ width: 100,
+ sorter: true,
+ align: 'right',
+ },
+];
+
+export const formatDataForTable = (data: HostData[]): HostRowData[] =>
+ data.map((host, index) => ({
+ key: `${host.hostName}-${index}`,
+ hostName: host.hostName || '',
+ active: (
+
+
+ ),
+ memory: (
+
+
+ ),
+ wait: `${Number((host.wait * 100).toFixed(1))}%`,
+ load15: host.load15,
+ }));
diff --git a/frontend/src/container/IngestionSettings/IngestionSettings.styles.scss b/frontend/src/container/IngestionSettings/IngestionSettings.styles.scss
index c98c6884fd2..acf7b238f4e 100644
--- a/frontend/src/container/IngestionSettings/IngestionSettings.styles.scss
+++ b/frontend/src/container/IngestionSettings/IngestionSettings.styles.scss
@@ -18,8 +18,13 @@
font-style: normal;
font-weight: var(--font-weight-normal);
line-height: 28px;
- /* 155.556% */
letter-spacing: -0.09px;
+
+ width: 72%; // arbitrary number to match input width
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ justify-content: space-between;
}
.subtitle {
@@ -356,6 +361,8 @@
flex: 1;
.heading {
+ margin-bottom: 8px;
+
.title {
font-size: 12px;
}
@@ -370,6 +377,18 @@
.ant-input-number {
width: 80%;
}
+
+ .no-limit {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ margin-bottom: 24px;
+
+ font-weight: 700;
+ font-size: 12px;
+ color: var(--bg-forest-400);
+ }
}
.signal-limit-view-mode {
diff --git a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
index 0355d069fba..aceb1c477a1 100644
--- a/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
+++ b/frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx
@@ -12,6 +12,7 @@ import {
Modal,
Row,
Select,
+ Switch,
Table,
TablePaginationConfig,
TableProps as AntDTableProps,
@@ -30,11 +31,11 @@ import { AxiosError } from 'axios';
import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
import Tags from 'components/Tags/Tags';
import { SOMETHING_WENT_WRONG } from 'constants/api';
-import dayjs, { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
import { useGetAllIngestionsKeys } from 'hooks/IngestionKeys/useGetAllIngestionKeys';
import useDebouncedFn from 'hooks/useDebouncedFunction';
import { useNotifications } from 'hooks/useNotifications';
-import { isNil } from 'lodash-es';
+import { isNil, isUndefined } from 'lodash-es';
import {
ArrowUpRight,
CalendarClock,
@@ -50,6 +51,7 @@ import {
Trash2,
X,
} from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMutation } from 'react-query';
@@ -69,7 +71,10 @@ const { Option } = Select;
const BYTES = 1073741824;
-export const disabledDate = (current: Dayjs): boolean =>
+// Using any type here because antd's DatePicker expects its own internal Dayjs type
+// which conflicts with our project's Dayjs type that has additional plugins (tz, utc etc).
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types
+export const disabledDate = (current: any): boolean =>
// Disable all dates before today
current && current < dayjs().endOf('day');
@@ -392,33 +397,75 @@ function MultiIngestionSettings(): JSX.Element {
const gbToBytes = (gb: number): number => Math.round(gb * 1024 ** 3);
- const getFormattedTime = (date: string): string =>
- dayjs(date).format('MMM DD,YYYY, hh:mm a');
+ const getFormattedTime = (
+ date: string,
+ formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
+ ): string =>
+ formatTimezoneAdjustedTimestamp(date, 'MMM DD,YYYY, hh:mm a (UTC Z)');
+
+ const showDeleteLimitModal = (
+ APIKey: IngestionKeyProps,
+ limit: LimitProps,
+ ): void => {
+ setActiveAPIKey(APIKey);
+ setActiveSignal(limit);
+ setIsDeleteLimitModalOpen(true);
+ };
+
+ const hideDeleteLimitModal = (): void => {
+ setIsDeleteLimitModalOpen(false);
+ };
+
+ const handleDiscardSaveLimit = (): void => {
+ setHasCreateLimitForIngestionKeyError(false);
+ setHasUpdateLimitForIngestionKeyError(false);
+ setIsEditAddLimitOpen(false);
+ setActiveAPIKey(null);
+ setActiveSignal(null);
+
+ addEditLimitForm.resetFields();
+ };
const handleAddLimit = (
APIKey: IngestionKeyProps,
signalName: string,
): void => {
- setActiveSignal({
- id: signalName,
- signal: signalName,
- config: {},
- });
-
const { dailyLimit, secondsLimit } = addEditLimitForm.getFieldsValue();
const payload = {
keyID: APIKey.id,
signal: signalName,
- config: {
+ config: {},
+ };
+
+ if (!isUndefined(dailyLimit)) {
+ payload.config = {
day: {
size: gbToBytes(dailyLimit),
},
+ };
+ }
+
+ if (!isUndefined(secondsLimit)) {
+ payload.config = {
+ ...payload.config,
second: {
size: gbToBytes(secondsLimit),
},
- },
- };
+ };
+ }
+
+ if (isUndefined(dailyLimit) && isUndefined(secondsLimit)) {
+ // No need to save as no limit is provided, close the edit view and reset active signal and api key
+ setActiveSignal(null);
+ setActiveAPIKey(null);
+ setIsEditAddLimitOpen(false);
+ setUpdatedTags([]);
+ hideAddViewModal();
+ setHasCreateLimitForIngestionKeyError(false);
+
+ return;
+ }
createLimitForIngestionKey(payload);
};
@@ -427,20 +474,36 @@ function MultiIngestionSettings(): JSX.Element {
APIKey: IngestionKeyProps,
signal: LimitProps,
): void => {
- setActiveSignal(signal);
const { dailyLimit, secondsLimit } = addEditLimitForm.getFieldsValue();
const payload = {
limitID: signal.id,
signal: signal.signal,
- config: {
+ config: {},
+ };
+
+ if (isUndefined(dailyLimit) && isUndefined(secondsLimit)) {
+ showDeleteLimitModal(APIKey, signal);
+
+ return;
+ }
+
+ if (!isUndefined(dailyLimit)) {
+ payload.config = {
day: {
size: gbToBytes(dailyLimit),
},
+ };
+ }
+
+ if (!isUndefined(secondsLimit)) {
+ payload.config = {
+ ...payload.config,
second: {
size: gbToBytes(secondsLimit),
},
- },
- };
+ };
+ }
+
updateLimitForIngestionKey(payload);
};
@@ -457,11 +520,26 @@ function MultiIngestionSettings(): JSX.Element {
signal: LimitProps,
): void => {
setActiveAPIKey(APIKey);
- setActiveSignal(signal);
+ setActiveSignal({
+ ...signal,
+ config: {
+ ...signal.config,
+ day: {
+ ...signal.config?.day,
+ enabled: !isNil(signal?.config?.day?.size),
+ },
+ second: {
+ ...signal.config?.second,
+ enabled: !isNil(signal?.config?.second?.size),
+ },
+ },
+ });
addEditLimitForm.setFieldsValue({
dailyLimit: bytesToGb(signal?.config?.day?.size || 0),
secondsLimit: bytesToGb(signal?.config?.second?.size || 0),
+ enableDailyLimit: !isNil(signal?.config?.day?.size),
+ enableSecondLimit: !isNil(signal?.config?.second?.size),
});
setIsEditAddLimitOpen(true);
@@ -473,28 +551,7 @@ function MultiIngestionSettings(): JSX.Element {
}
};
- const showDeleteLimitModal = (
- APIKey: IngestionKeyProps,
- limit: LimitProps,
- ): void => {
- setActiveAPIKey(APIKey);
- setActiveSignal(limit);
- setIsDeleteLimitModalOpen(true);
- };
-
- const hideDeleteLimitModal = (): void => {
- setIsDeleteLimitModalOpen(false);
- };
-
- const handleDiscardSaveLimit = (): void => {
- setHasCreateLimitForIngestionKeyError(false);
- setHasUpdateLimitForIngestionKeyError(false);
- setIsEditAddLimitOpen(false);
- setActiveAPIKey(null);
- setActiveSignal(null);
-
- addEditLimitForm.resetFields();
- };
+ const { formatTimezoneAdjustedTimestamp } = useTimezone();
const columns: AntDTableProps
-
-
Daily limit
+
+ Daily limit
+
+
+ {
+ setActiveSignal({
+ ...activeSignal,
+ config: {
+ ...activeSignal.config,
+ day: {
+ ...activeSignal.config?.day,
+ enabled: value,
+ },
+ },
+ });
+ }}
+ />
+
+
+
- Add a limit for data ingested daily{' '}
+ Add a limit for data ingested daily
-
-
-
-
-
-
-
- }
- />
-
+ {activeSignal?.config?.day?.enabled ? (
+
+
+
+
+
+
+
+ }
+ />
+
+ ) : (
+
+
+ )}
-
Per Second limit
+
+ Per Second limit{' '}
+
+
+ {
+ setActiveSignal({
+ ...activeSignal,
+ config: {
+ ...activeSignal.config,
+ second: {
+ ...activeSignal.config?.second,
+ enabled: value,
+ },
+ },
+ });
+ }}
+ />
+
+
+
- {' '}
- Add a limit for data ingested every second{' '}
+ Add a limit for data ingested every second
-
-
-
-
-
-
-
- }
- />
-
+ {activeSignal?.config?.second?.enabled ? (
+
+
+
+
+
+
+
+ }
+ />
+
+ ) : (
+
+
+ )}
@@ -458,7 +445,11 @@ function DashboardsList(): JSX.Element {
placement="left"
overlayClassName="title-toolip"
>
-
+ e.stopPropagation()}
+ >
Copy Link
+ }
+ onClick={handleJsonExport}
+ >
+ Export JSON
+
{
e.stopPropagation();
e.preventDefault();
@@ -1100,6 +1100,11 @@ export interface Data {
isLocked: boolean;
id: string;
image?: string;
+ widgets?: Array;
+ layout?: Layout[];
+ panelMap?: Record;
+ variables: Record;
+ version?: string;
}
export default DashboardsList;
diff --git a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
index 6926db85bee..eb595c204dd 100644
--- a/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
+++ b/frontend/src/container/ListOfDashboard/ImportJSON/index.tsx
@@ -82,9 +82,8 @@ function ImportJSON({
const dashboardData = JSON.parse(editorValue) as DashboardData;
- // Add validation for uuid
- if (dashboardData.uuid !== undefined && dashboardData.uuid.trim() === '') {
- // silently remove uuid if it is empty
+ // Remove uuid from the dashboard data, in all cases - empty, duplicate or any valid not duplicate uuid
+ if (dashboardData.uuid !== undefined) {
delete dashboardData.uuid;
}
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
index 3c935c8b89d..8c46d572fdc 100644
--- a/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/NodeMetrics.tsx
@@ -8,10 +8,12 @@ import { useResizeObserver } from 'hooks/useDimensions';
import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { useTimezone } from 'providers/Timezone';
import { useMemo, useRef } from 'react';
import { useQueries, UseQueryResult } from 'react-query';
import { SuccessResponse } from 'types/api';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
import {
getHostQueryPayload,
@@ -73,6 +75,8 @@ function NodeMetrics({
[queries],
);
+ const { timezone } = useTimezone();
+
const options = useMemo(
() =>
queries.map(({ data }, idx) =>
@@ -86,6 +90,9 @@ function NodeMetrics({
minTimeScale: start,
maxTimeScale: end,
verticalLineTimestamp,
+ tzDate: (timestamp: number) =>
+ uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
+ timezone: timezone.value,
}),
),
[
@@ -96,6 +103,7 @@ function NodeMetrics({
start,
verticalLineTimestamp,
end,
+ timezone.value,
],
);
diff --git a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
index 99391d65e05..bb6ff0b6542 100644
--- a/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
+++ b/frontend/src/container/LogDetailedView/InfraMetrics/PodMetrics.tsx
@@ -8,10 +8,12 @@ import { useResizeObserver } from 'hooks/useDimensions';
import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { useTimezone } from 'providers/Timezone';
import { useMemo, useRef } from 'react';
import { useQueries, UseQueryResult } from 'react-query';
import { SuccessResponse } from 'types/api';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
import { getPodQueryPayload, podWidgetInfo } from './constants';
@@ -60,6 +62,7 @@ function PodMetrics({
() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
[queries],
);
+ const { timezone } = useTimezone();
const options = useMemo(
() =>
@@ -74,9 +77,20 @@ function PodMetrics({
minTimeScale: start,
maxTimeScale: end,
verticalLineTimestamp,
+ tzDate: (timestamp: number) =>
+ uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
+ timezone: timezone.value,
}),
),
- [queries, isDarkMode, dimensions, start, verticalLineTimestamp, end],
+ [
+ queries,
+ isDarkMode,
+ dimensions,
+ start,
+ end,
+ verticalLineTimestamp,
+ timezone.value,
+ ],
);
const renderCardContent = (
diff --git a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
index 57ceea5072a..501c99740d7 100644
--- a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
+++ b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -11,7 +11,8 @@ import ROUTES from 'constants/routes';
import dompurify from 'dompurify';
import { isEmpty } from 'lodash-es';
import { ArrowDownToDot, ArrowUpFromDot, Ellipsis } from 'lucide-react';
-import { useMemo, useState } from 'react';
+import { useTimezone } from 'providers/Timezone';
+import React, { useMemo, useState } from 'react';
import { useLocation } from 'react-router-dom';
import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
@@ -68,6 +69,8 @@ export function TableViewActions(
const [isOpen, setIsOpen] = useState(false);
+ const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
if (record.field === 'body') {
const parsedBody = recursiveParseJSON(fieldData.value);
if (!isEmpty(parsedBody)) {
@@ -100,33 +103,44 @@ export function TableViewActions(
);
}
- return (
-
- {record.field === 'body' ? (
-
-
-
- ) : (
-
-
- {removeEscapeCharacters(fieldData.value)}
+ let cleanTimestamp: string;
+ if (record.field === 'timestamp') {
+ cleanTimestamp = fieldData.value.replace(/^["']|["']$/g, '');
+ }
+
+ const renderFieldContent = (): JSX.Element => {
+ const commonStyles: React.CSSProperties = {
+ color: Color.BG_SIENNA_400,
+ whiteSpace: 'pre-wrap',
+ tabSize: 4,
+ };
+
+ switch (record.field) {
+ case 'body':
+ return ;
+
+ case 'timestamp':
+ return (
+
+ {formatTimezoneAdjustedTimestamp(
+ cleanTimestamp,
+ 'MM/DD/YYYY, HH:mm:ss.SSS (UTC Z)',
+ )}
-
- )}
+ );
+
+ default:
+ return (
+ {removeEscapeCharacters(fieldData.value)}
+ );
+ }
+ };
+ return (
+
+
+ {renderFieldContent()}
+
{!isListViewPanel && (
diff --git a/frontend/src/container/LogsExplorerViews/index.tsx b/frontend/src/container/LogsExplorerViews/index.tsx
index 5ce5dbe2bea..8d6b74a0254 100644
--- a/frontend/src/container/LogsExplorerViews/index.tsx
+++ b/frontend/src/container/LogsExplorerViews/index.tsx
@@ -50,6 +50,7 @@ import {
} from 'lodash-es';
import { Sliders } from 'lucide-react';
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
+import { useTimezone } from 'providers/Timezone';
import {
memo,
MutableRefObject,
@@ -669,13 +670,19 @@ function LogsExplorerViews({
setIsLoadingQueries,
]);
+ const { timezone } = useTimezone();
+
const flattenLogData = useMemo(
() =>
logs.map((log) => {
const timestamp =
typeof log.timestamp === 'string'
- ? dayjs(log.timestamp).format('YYYY-MM-DD HH:mm:ss.SSS')
- : dayjs(log.timestamp / 1e6).format('YYYY-MM-DD HH:mm:ss.SSS');
+ ? dayjs(log.timestamp)
+ .tz(timezone.value)
+ .format('YYYY-MM-DD HH:mm:ss.SSS')
+ : dayjs(log.timestamp / 1e6)
+ .tz(timezone.value)
+ .format('YYYY-MM-DD HH:mm:ss.SSS');
return FlatLogData({
timestamp,
@@ -683,7 +690,7 @@ function LogsExplorerViews({
...omit(log, 'timestamp', 'body'),
});
}),
- [logs],
+ [logs, timezone.value],
);
return (
diff --git a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
index 6271ff793e8..d708684824a 100644
--- a/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
+++ b/frontend/src/container/LogsExplorerViews/tests/LogsExplorerViews.test.tsx
@@ -7,6 +7,7 @@ import { rest } from 'msw';
import { SELECTED_VIEWS } from 'pages/LogsExplorer/utils';
import { QueryBuilderProvider } from 'providers/QueryBuilder';
import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
+import TimezoneProvider from 'providers/Timezone';
import { I18nextProvider } from 'react-i18next';
import { Provider } from 'react-redux';
import { MemoryRouter } from 'react-router-dom';
@@ -91,17 +92,19 @@ const renderer = (): RenderResult =>
-
- {}}
- listQueryKeyRef={{ current: {} }}
- chartQueryKeyRef={{ current: {} }}
- />
-
+
+
+ {}}
+ listQueryKeyRef={{ current: {} }}
+ chartQueryKeyRef={{ current: {} }}
+ />
+
+
diff --git a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
index a7598b5c768..d8131b5403e 100644
--- a/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
+++ b/frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx
@@ -15,6 +15,7 @@ import { useLogsData } from 'hooks/useLogsData';
import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
import { FlatLogData } from 'lib/logs/flatLogData';
import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { useTimezone } from 'providers/Timezone';
import {
Dispatch,
HTMLAttributes,
@@ -76,7 +77,12 @@ function LogsPanelComponent({
});
};
- const columns = getLogPanelColumnsList(widget.selectedLogFields);
+ const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+ const columns = getLogPanelColumnsList(
+ widget.selectedLogFields,
+ formatTimezoneAdjustedTimestamp,
+ );
const dataLength =
queryResponse.data?.payload?.data?.newResult?.data?.result[0]?.list?.length;
diff --git a/frontend/src/container/LogsPanelTable/utils.tsx b/frontend/src/container/LogsPanelTable/utils.tsx
index a95442b7cce..954526bde1c 100644
--- a/frontend/src/container/LogsPanelTable/utils.tsx
+++ b/frontend/src/container/LogsPanelTable/utils.tsx
@@ -1,6 +1,7 @@
import { ColumnsType } from 'antd/es/table';
import { Typography } from 'antd/lib';
import { OPERATORS } from 'constants/queryBuilder';
+import { TimestampInput } from 'hooks/useTimezoneFormatter/useTimezoneFormatter';
// import Typography from 'antd/es/typography/Typography';
import { RowData } from 'lib/query/createTableColumnsFromQuery';
import { ReactNode } from 'react';
@@ -13,18 +14,31 @@ import { v4 as uuid } from 'uuid';
export const getLogPanelColumnsList = (
selectedLogFields: Widgets['selectedLogFields'],
+ formatTimezoneAdjustedTimestamp: (
+ input: TimestampInput,
+ format?: string,
+ ) => string,
): ColumnsType => {
const initialColumns: ColumnsType = [];
const columns: ColumnsType =
selectedLogFields?.map((field: IField) => {
const { name } = field;
+
return {
title: name,
dataIndex: name,
key: name,
width: name === 'body' ? 350 : 100,
render: (value: ReactNode): JSX.Element => {
+ if (name === 'timestamp') {
+ return (
+
+ {formatTimezoneAdjustedTimestamp(value as string)}
+
+ );
+ }
+
if (name === 'body') {
return (
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
index 77bf86b80f1..24e47041d78 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview.tsx
@@ -145,41 +145,50 @@ function Application(): JSX.Element {
[servicename, topLevelOperations],
);
- const operationPerSecWidget = getWidgetQueryBuilder({
- query: {
- queryType: EQueryType.QUERY_BUILDER,
- promql: [],
- builder: operationPerSec({
- servicename,
- tagFilterItems,
- topLevelOperations: topLevelOperationsRoute,
+ const operationPerSecWidget = useMemo(
+ () =>
+ getWidgetQueryBuilder({
+ query: {
+ queryType: EQueryType.QUERY_BUILDER,
+ promql: [],
+ builder: operationPerSec({
+ servicename,
+ tagFilterItems,
+ topLevelOperations: topLevelOperationsRoute,
+ }),
+ clickhouse_sql: [],
+ id: uuid(),
+ },
+ title: GraphTitle.RATE_PER_OPS,
+ panelTypes: PANEL_TYPES.TIME_SERIES,
+ yAxisUnit: 'ops',
+ id: SERVICE_CHART_ID.rps,
}),
- clickhouse_sql: [],
- id: uuid(),
- },
- title: GraphTitle.RATE_PER_OPS,
- panelTypes: PANEL_TYPES.TIME_SERIES,
- yAxisUnit: 'ops',
- id: SERVICE_CHART_ID.rps,
- });
+ [servicename, tagFilterItems, topLevelOperationsRoute],
+ );
- const errorPercentageWidget = getWidgetQueryBuilder({
- query: {
- queryType: EQueryType.QUERY_BUILDER,
- promql: [],
- builder: errorPercentage({
- servicename,
- tagFilterItems,
- topLevelOperations: topLevelOperationsRoute,
+ const errorPercentageWidget = useMemo(
+ () =>
+ getWidgetQueryBuilder({
+ query: {
+ queryType: EQueryType.QUERY_BUILDER,
+ promql: [],
+ builder: errorPercentage({
+ servicename,
+ tagFilterItems,
+ topLevelOperations: topLevelOperationsRoute,
+ }),
+ clickhouse_sql: [],
+ id: uuid(),
+ },
+ title: GraphTitle.ERROR_PERCENTAGE,
+ panelTypes: PANEL_TYPES.TIME_SERIES,
+ yAxisUnit: '%',
+ id: SERVICE_CHART_ID.errorPercentage,
+ fillSpans: true,
}),
- clickhouse_sql: [],
- id: uuid(),
- },
- title: GraphTitle.ERROR_PERCENTAGE,
- panelTypes: PANEL_TYPES.TIME_SERIES,
- yAxisUnit: '%',
- id: SERVICE_CHART_ID.errorPercentage,
- });
+ [servicename, tagFilterItems, topLevelOperationsRoute],
+ );
const stepInterval = useMemo(
() =>
@@ -214,12 +223,11 @@ function Application(): JSX.Element {
apmToTraceQuery: Query,
isViewLogsClicked?: boolean,
): (() => void) => (): void => {
- const currentTime = timestamp;
- const endTime = timestamp + stepInterval;
- console.log(endTime, stepInterval);
+ const endTime = timestamp;
+ const startTime = timestamp - stepInterval;
const urlParams = new URLSearchParams(search);
- urlParams.set(QueryParams.startTime, currentTime.toString());
+ urlParams.set(QueryParams.startTime, startTime.toString());
urlParams.set(QueryParams.endTime, endTime.toString());
urlParams.delete(QueryParams.relativeTime);
const avialableParams = routeConfig[ROUTES.TRACE];
diff --git a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
index 24e22332447..42f54c1448a 100644
--- a/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
+++ b/frontend/src/container/MetricsApplication/Tabs/Overview/ServiceOverview.tsx
@@ -53,24 +53,28 @@ function ServiceOverview({
[isSpanMetricEnable, queries],
);
- const latencyWidget = getWidgetQueryBuilder({
- query: {
- queryType: EQueryType.QUERY_BUILDER,
- promql: [],
- builder: latency({
- servicename,
- tagFilterItems,
- isSpanMetricEnable,
- topLevelOperationsRoute,
+ const latencyWidget = useMemo(
+ () =>
+ getWidgetQueryBuilder({
+ query: {
+ queryType: EQueryType.QUERY_BUILDER,
+ promql: [],
+ builder: latency({
+ servicename,
+ tagFilterItems,
+ isSpanMetricEnable,
+ topLevelOperationsRoute,
+ }),
+ clickhouse_sql: [],
+ id: uuid(),
+ },
+ title: GraphTitle.LATENCY,
+ panelTypes: PANEL_TYPES.TIME_SERIES,
+ yAxisUnit: 'ns',
+ id: SERVICE_CHART_ID.latency,
}),
- clickhouse_sql: [],
- id: uuid(),
- },
- title: GraphTitle.LATENCY,
- panelTypes: PANEL_TYPES.TIME_SERIES,
- yAxisUnit: 'ns',
- id: SERVICE_CHART_ID.latency,
- });
+ [isSpanMetricEnable, servicename, tagFilterItems, topLevelOperationsRoute],
+ );
const isQueryEnabled =
!topLevelOperationsIsLoading && topLevelOperationsRoute.length > 0;
diff --git a/frontend/src/container/MetricsApplication/Tabs/util.ts b/frontend/src/container/MetricsApplication/Tabs/util.ts
index e6d58831a03..e1f8164b093 100644
--- a/frontend/src/container/MetricsApplication/Tabs/util.ts
+++ b/frontend/src/container/MetricsApplication/Tabs/util.ts
@@ -65,11 +65,11 @@ export function onViewTracePopupClick({
stepInterval,
}: OnViewTracePopupClickProps): VoidFunction {
return (): void => {
- const currentTime = timestamp;
- const endTime = timestamp + (stepInterval || 60);
+ const endTime = timestamp;
+ const startTime = timestamp - (stepInterval || 60);
const urlParams = new URLSearchParams(window.location.search);
- urlParams.set(QueryParams.startTime, currentTime.toString());
+ urlParams.set(QueryParams.startTime, startTime.toString());
urlParams.set(QueryParams.endTime, endTime.toString());
urlParams.delete(QueryParams.relativeTime);
const avialableParams = routeConfig[ROUTES.TRACE];
diff --git a/frontend/src/container/MetricsApplication/constant.ts b/frontend/src/container/MetricsApplication/constant.ts
index 75853cc8ea4..1052a8d09a2 100644
--- a/frontend/src/container/MetricsApplication/constant.ts
+++ b/frontend/src/container/MetricsApplication/constant.ts
@@ -38,11 +38,12 @@ export enum FORMULA {
// query C => durationNano <= 2000ms
// Since <= 2000ms includes <= 500ms, we over count, to correct we subtract B/2
// so the full expression would be (B + C/2) - B/2 = (B+C)/2
+ // However, if you add a filter on durationNano > 500ms, (filterItemC in overviewQueries) the query would be
+ // B + C/2
APDEX_TRACES = '((B + C)/2)/A',
- // Does the same not apply for delta span metrics?
- // No, because the delta metrics store the counts just for the current bucket
- // so we don't need to subtract anything
- APDEX_DELTA_SPAN_METRICS = '(B + C)/A',
+ // The delta span metrics store delta compared to previous reporting interval
+ // but not the counts for the current interval. The bucket counts are cumulative
+ APDEX_DELTA_SPAN_METRICS = '((B + C)/2)/A',
// Cumulative span metrics store the counts for all buckets
// so we need to subtract B/2 to correct the over counting
APDEX_CUMULATIVE_SPAN_METRICS = '((B + C)/2)/A',
diff --git a/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.styles.scss b/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.styles.scss
new file mode 100644
index 00000000000..d7b9813c50f
--- /dev/null
+++ b/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.styles.scss
@@ -0,0 +1,96 @@
+.timezone-adaption {
+ padding: 16px;
+ background: var(--bg-ink-400);
+ border: 1px solid var(--bg-ink-500);
+ border-radius: 4px;
+
+ &__header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+
+ &__title {
+ color: var(--bg-vanilla-300);
+ font-size: 14px;
+ font-weight: 500;
+ margin: 0;
+ }
+
+ &__description {
+ color: var(--bg-vanilla-400);
+ font-size: 14px;
+ line-height: 20px;
+ margin: 0 0 12px 0;
+ }
+
+ &__note {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 7.5px 12px;
+ background: rgba(78, 116, 248, 0.1);
+ border: 1px solid rgba(78, 116, 248, 0.1);
+ border-radius: 4px;
+ }
+
+ &__bullet {
+ color: var(--bg-robin-400);
+ font-size: 16px;
+ line-height: 20px;
+ }
+
+ &__note-text-container {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+
+ &__note-text {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ color: var(--bg-robin-400);
+ font-size: 14px;
+ line-height: 20px;
+ }
+ &__note-text-overridden {
+ display: flex;
+ align-items: center;
+ padding: 0 2px;
+ background: rgba(171, 189, 255, 0.04);
+ border-radius: 2px;
+ font-size: 12px;
+ line-height: 16px;
+ color: var(--bg-vanilla-100);
+ }
+ &__clear-override {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ background: transparent;
+ border: none;
+ padding: 0;
+ color: var(--bg-robin-300);
+ font-size: 12px;
+ line-height: 16px; /* 133.333% */
+ letter-spacing: 0.12px;
+ cursor: pointer;
+ }
+}
+
+.lightMode {
+ .timezone-adaption {
+ background-color: var(--bg-vanilla-100);
+ border-color: var(--bg-vanilla-300);
+
+ &__title {
+ color: var(--text-ink-300);
+ }
+
+ &__description {
+ color: var(--text-ink-400);
+ }
+ }
+}
diff --git a/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx b/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx
new file mode 100644
index 00000000000..a716d4196dd
--- /dev/null
+++ b/frontend/src/container/MySettings/TimezoneAdaptation/TimezoneAdaptation.tsx
@@ -0,0 +1,82 @@
+import './TimezoneAdaptation.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Switch } from 'antd';
+import { Delete } from 'lucide-react';
+import { useTimezone } from 'providers/Timezone';
+import { useMemo } from 'react';
+
+function TimezoneAdaptation(): JSX.Element {
+ const {
+ timezone,
+ browserTimezone,
+ updateTimezone,
+ isAdaptationEnabled,
+ setIsAdaptationEnabled,
+ } = useTimezone();
+
+ const isTimezoneOverridden = useMemo(
+ () => timezone.offset !== browserTimezone.offset,
+ [timezone, browserTimezone],
+ );
+
+ const getSwitchStyles = (): React.CSSProperties => ({
+ backgroundColor:
+ isAdaptationEnabled && isTimezoneOverridden ? Color.BG_AMBER_400 : undefined,
+ });
+
+ const handleOverrideClear = (): void => {
+ updateTimezone(browserTimezone);
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default TimezoneAdaptation;
diff --git a/frontend/src/container/MySettings/index.tsx b/frontend/src/container/MySettings/index.tsx
index de6c12eb53d..59abd0cf733 100644
--- a/frontend/src/container/MySettings/index.tsx
+++ b/frontend/src/container/MySettings/index.tsx
@@ -7,6 +7,7 @@ import { LogOut, Moon, Sun } from 'lucide-react';
import { useState } from 'react';
import Password from './Password';
+import TimezoneAdaptation from './TimezoneAdaptation/TimezoneAdaptation';
import UserInfo from './UserInfo';
function MySettings(): JSX.Element {
@@ -78,6 +79,8 @@ function MySettings(): JSX.Element {
+
+
+ Adapt to my timezone
++ Adapt the timestamps shown in the SigNoz console to my active timezone. +
+ +
+
+
+ •
+
+ {isTimezoneOverridden ? (
+ <>
+ Your current timezone is overridden to
+
+ {timezone.offset}
+
+
+ ) : (
+ <>
+ You can override the timezone adaption for any view with the time
+ picker.
+
+ )}
+
+
+
+ {!!isTimezoneOverridden && (
+
+ )}
+