diff --git a/frontend/src/constants/global.ts b/frontend/src/constants/global.ts
new file mode 100644
index 0000000000..d2a455ea57
--- /dev/null
+++ b/frontend/src/constants/global.ts
@@ -0,0 +1,2 @@
+const MAX_RPS_LIMIT = 100;
+export { MAX_RPS_LIMIT };
diff --git a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
index 3551c3a87a..7e22e3a11c 100644
--- a/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
+++ b/frontend/src/container/FormAlertRules/ChartPreview/index.tsx
@@ -10,7 +10,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
import { useResizeObserver } from 'hooks/useDimensions';
import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
-import { useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
@@ -18,6 +18,7 @@ import { AlertDef } from 'types/api/alerts/def';
import { Query } from 'types/api/queryBuilder/queryBuilderData';
import { EQueryType } from 'types/common/dashboard';
import { GlobalReducer } from 'types/reducer/globalTime';
+import { getTimeRange } from 'utils/getTimeRange';
import { ChartContainer, FailedMessageContainer } from './styles';
import { getThresholdLabel } from './utils';
@@ -49,9 +50,13 @@ function ChartPreview({
}: ChartPreviewProps): JSX.Element | null {
const { t } = useTranslation('alerts');
const threshold = alertDef?.condition.target || 0;
- const { minTime, maxTime } = useSelector
(
- (state) => state.globalTime,
- );
+ const [minTimeScale, setMinTimeScale] = useState();
+ const [maxTimeScale, setMaxTimeScale] = useState();
+
+ const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
const canQuery = useMemo((): boolean => {
if (!query || query == null) {
@@ -101,6 +106,13 @@ function ChartPreview({
const graphRef = useRef(null);
+ useEffect((): void => {
+ const { startTime, endTime } = getTimeRange(queryResponse);
+
+ setMinTimeScale(startTime);
+ setMaxTimeScale(endTime);
+ }, [maxTime, minTime, globalSelectedInterval, queryResponse]);
+
const chartData = getUPlotChartData(queryResponse?.data?.payload);
const containerDimensions = useResizeObserver(graphRef);
@@ -117,6 +129,8 @@ function ChartPreview({
yAxisUnit,
apiResponse: queryResponse?.data?.payload,
dimensions: containerDimensions,
+ minTimeScale,
+ maxTimeScale,
isDarkMode,
thresholds: [
{
@@ -141,6 +155,8 @@ function ChartPreview({
yAxisUnit,
queryResponse?.data?.payload,
containerDimensions,
+ minTimeScale,
+ maxTimeScale,
isDarkMode,
threshold,
t,
diff --git a/frontend/src/container/GantChart/GantChart.styles.scss b/frontend/src/container/GantChart/GantChart.styles.scss
new file mode 100644
index 0000000000..cc1e828842
--- /dev/null
+++ b/frontend/src/container/GantChart/GantChart.styles.scss
@@ -0,0 +1,16 @@
+.span-container {
+ .spanDetails {
+ position: absolute;
+ height: 50px;
+ padding: 8px;
+ min-width: 150px;
+ background: lightcyan;
+ color: black;
+ bottom: 24px;
+ left: 0;
+
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+}
diff --git a/frontend/src/container/GantChart/Span/index.tsx b/frontend/src/container/GantChart/Span/index.tsx
new file mode 100644
index 0000000000..23fc000ac3
--- /dev/null
+++ b/frontend/src/container/GantChart/Span/index.tsx
@@ -0,0 +1,96 @@
+import '../GantChart.styles.scss';
+
+import { Popover, Typography } from 'antd';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import dayjs from 'dayjs';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useEffect } from 'react';
+import { toFixed } from 'utils/toFixed';
+
+import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
+
+interface SpanLengthProps {
+ globalStart: number;
+ startTime: number;
+ name: string;
+ width: string;
+ leftOffset: string;
+ bgColor: string;
+ inMsCount: number;
+}
+
+function Span(props: SpanLengthProps): JSX.Element {
+ const {
+ width,
+ leftOffset,
+ bgColor,
+ inMsCount,
+ startTime,
+ name,
+ globalStart,
+ } = props;
+ const isDarkMode = useIsDarkMode();
+ const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
+
+ useEffect(() => {
+ document.documentElement.scrollTop = document.documentElement.clientHeight;
+ document.documentElement.scrollLeft = document.documentElement.clientWidth;
+ }, []);
+
+ const getContent = (): JSX.Element => {
+ const timeStamp = dayjs(startTime).format('h:mm:ss:SSS A');
+ const startTimeInMs = startTime - globalStart;
+ return (
+
+
+ {' '}
+ Duration : {inMsCount}
+
+
+
+ Start Time: {startTimeInMs}ms [{timeStamp}]{' '}
+
+
+ );
+ };
+
+ return (
+
+
+
+
+
+ {`${toFixed(
+ time,
+ 2,
+ )} ${timeUnitName}`}
+
+ );
+}
+
+export default Span;
diff --git a/frontend/src/container/GantChart/SpanLength/styles.ts b/frontend/src/container/GantChart/Span/styles.ts
similarity index 100%
rename from frontend/src/container/GantChart/SpanLength/styles.ts
rename to frontend/src/container/GantChart/Span/styles.ts
diff --git a/frontend/src/container/GantChart/SpanLength/index.tsx b/frontend/src/container/GantChart/SpanLength/index.tsx
deleted file mode 100644
index 9e3611bb01..0000000000
--- a/frontend/src/container/GantChart/SpanLength/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { toFixed } from 'utils/toFixed';
-
-import { SpanBorder, SpanLine, SpanText, SpanWrapper } from './styles';
-
-interface SpanLengthProps {
- width: string;
- leftOffset: string;
- bgColor: string;
- inMsCount: number;
-}
-
-function SpanLength(props: SpanLengthProps): JSX.Element {
- const { width, leftOffset, bgColor, inMsCount } = props;
- const isDarkMode = useIsDarkMode();
- const { time, timeUnitName } = convertTimeToRelevantUnit(inMsCount);
- return (
-
-
-
- {`${toFixed(
- time,
- 2,
- )} ${timeUnitName}`}
-
- );
-}
-
-export default SpanLength;
diff --git a/frontend/src/container/GantChart/Trace/index.tsx b/frontend/src/container/GantChart/Trace/index.tsx
index d38e3594ae..05a19a8268 100644
--- a/frontend/src/container/GantChart/Trace/index.tsx
+++ b/frontend/src/container/GantChart/Trace/index.tsx
@@ -16,7 +16,7 @@ import {
import { ITraceTree } from 'types/api/trace/getTraceItem';
import { ITraceMetaData } from '..';
-import SpanLength from '../SpanLength';
+import Span from '../Span';
import SpanName from '../SpanName';
import { getMetaDataFromSpanTree, getTopLeftFromBody } from '../utils';
import {
@@ -169,7 +169,10 @@ function Trace(props: TraceProps): JSX.Element {
-
- {isExpandAll ? : }
+ {isExpandAll ? (
+
+ ) : (
+
+ )}
- {getAbbreviatedLabel(label)}
+
+ {getAbbreviatedLabel(label)}
+
);
}
diff --git a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
index 3bd60c40ba..db42625f1d 100644
--- a/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx
@@ -23,6 +23,7 @@ import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers';
import { GlobalReducer } from 'types/reducer/globalTime';
import uPlot from 'uplot';
+import { getTimeRange } from 'utils/getTimeRange';
import { PANEL_TYPES_VS_FULL_VIEW_TABLE } from './contants';
import GraphManager from './GraphManager';
@@ -92,6 +93,21 @@ function FullView({
const isDarkMode = useIsDarkMode();
+ const [minTimeScale, setMinTimeScale] = useState();
+ const [maxTimeScale, setMaxTimeScale] = useState();
+
+ const { minTime, maxTime, selectedTime: globalSelectedInterval } = useSelector<
+ AppState,
+ GlobalReducer
+ >((state) => state.globalTime);
+
+ useEffect((): void => {
+ const { startTime, endTime } = getTimeRange(response);
+
+ setMinTimeScale(startTime);
+ setMaxTimeScale(endTime);
+ }, [maxTime, minTime, globalSelectedInterval, response]);
+
useEffect(() => {
if (!response.isFetching && fullViewRef.current) {
const width = fullViewRef.current?.clientWidth
@@ -114,6 +130,8 @@ function FullView({
graphsVisibilityStates,
setGraphsVisibilityStates,
thresholds: widget.thresholds,
+ minTimeScale,
+ maxTimeScale,
});
setChartOptions(newChartOptions);
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index 2129220427..29abaa9685 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -1,4 +1,5 @@
import { Skeleton, Typography } from 'antd';
+import cx from 'classnames';
import { ToggleGraphProps } from 'components/Graph/types';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import { QueryParams } from 'constants/query';
@@ -298,7 +299,10 @@ function WidgetGraphComponent({