chore: infra monitoring improvements (#8002)

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -75,7 +75,6 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 	const getItemContent = useCallback(
 		(_: number, logToRender: ILog): JSX.Element => (
 			<RawLogView
-				isReadOnly
 				isTextOverflowEllipsisDisabled
 				key={logToRender.id}
 				data={logToRender}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -80,6 +80,7 @@ function Metrics({
 					softMin: null,
 					minTimeScale: timeRange.startTime,
 					maxTimeScale: timeRange.endTime,
+					enableZoom: true,
 				}),
 			),
 		[queries, isDarkMode, dimensions, timeRange.startTime, timeRange.endTime],
@@ -115,7 +116,7 @@ function Metrics({
 			<div className="metrics-header">
 				<div className="metrics-datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						onTimeChange={handleTimeChange}

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -3,6 +3,25 @@
 	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
+	.log-detail-drawer__title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.log-detail-drawer__title-left {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		}
+
+		.log-detail-drawer__title-right {
+			.ant-btn {
+				display: flex;
+				align-items: center;
+			}
+		}
+	}
+
 	.ant-drawer-header {
 		padding: 8px 16px;
 		border-bottom: none;

frontend/src/components/LogDetail/index.tsx

@@ -8,6 +8,8 @@ import { RadioChangeEvent } from 'antd/lib';
 import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
 import ContextView from 'container/LogDetailedView/ContextView/ContextView';
 import InfraMetrics from 'container/LogDetailedView/InfraMetrics/InfraMetrics';
 import JSONView from 'container/LogDetailedView/JsonView';
@@ -22,9 +24,12 @@ import dompurify from 'dompurify';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
 import {
 	BarChart2,
 	Braces,
+	Compass,
 	Copy,
 	Filter,
 	HardHat,
@@ -33,9 +38,12 @@ import {
 	X,
 } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { useCopyToClipboard } from 'react-use';
+import { useSelector } from 'react-redux';
+import { useCopyToClipboard, useLocation } from 'react-use';
+import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
 import { FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
 import { RESOURCE_KEYS, VIEW_TYPES, VIEWS } from './constants';
@@ -77,6 +85,12 @@ function LogDetail({
 	});
 
 	const isDarkMode = useIsDarkMode();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+	const urlQuery = useUrlQuery();
+	const { maxTime, minTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
 
 	const { notifications } = useNotifications();
 
@@ -119,6 +133,21 @@ function LogDetail({
 		});
 	};
 
+	// Go to logs explorer page with the log data
+	const handleOpenInExplorer = (): void => {
+		urlQuery.set(QueryParams.activeLogId, `"${log?.id}"`);
+		urlQuery.set(QueryParams.startTime, minTime?.toString() || '');
+		urlQuery.set(QueryParams.endTime, maxTime?.toString() || '');
+		safeNavigate(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+	};
+
+	// Only show when opened from infra monitoring page
+	const showOpenInExplorerBtn = useMemo(
+		() => location.pathname?.includes('/infrastructure-monitoring'),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
 	if (!log) {
 		// eslint-disable-next-line react/jsx-no-useless-fragment
 		return <></>;
@@ -131,10 +160,23 @@ function LogDetail({
 			width="60%"
 			maskStyle={{ background: 'none' }}
 			title={
-				<>
+				<div className="log-detail-drawer__title">
+					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
-				</>
+					</div>
+					{showOpenInExplorerBtn && (
+						<div className="log-detail-drawer__title-right">
+							<Button
+								className="open-in-explorer-btn"
+								icon={<Compass size={16} />}
+								onClick={handleOpenInExplorer}
+							>
+								Open in Explorer
+							</Button>
+						</div>
+					)}
+				</div>
 			}
 			placement="right"
 			// closable

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.tsx

@@ -65,7 +65,6 @@ function EntityLogs({
 	const getItemContent = useCallback(
 		(_: number, logToRender: ILog): JSX.Element => (
 			<RawLogView
-				isReadOnly
 				isTextOverflowEllipsisDisabled
 				key={logToRender.id}
 				data={logToRender}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityMetrics/EntityMetrics.tsx

@@ -110,6 +110,7 @@ function EntityMetrics<T>({
 					softMin: null,
 					minTimeScale: timeRange.startTime,
 					maxTimeScale: timeRange.endTime,
+					enableZoom: true,
 				});
 			}),
 		[
@@ -162,7 +163,7 @@ function EntityMetrics<T>({
 			<div className="metrics-header">
 				<div className="metrics-datetime-section">
 					<DateTimeSelectionV2
-						showAutoRefresh={false}
+						showAutoRefresh
 						showRefreshText={false}
 						hideShareModal
 						onTimeChange={handleTimeChange}

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -60,6 +60,7 @@ export interface GetUPlotChartOptions {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	isLogScale?: boolean;
 	colorMapping?: Record<string, string>;
+	enableZoom?: boolean;
 }
 
 /** the function converts series A , series B , series C to
@@ -168,6 +169,7 @@ export const getUPlotChartOptions = ({
 	customSeries,
 	isLogScale,
 	colorMapping,
+	enableZoom,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -205,7 +207,25 @@ export const getUPlotChartOptions = ({
 					`${u.series[seriesIdx].points.stroke(u, seriesIdx)}90`,
 				fill: (): string => '#fff',
 			},
+			...(enableZoom
+				? {
+						drag: {
+							x: true,
+							y: true,
 						},
+						focus: {
+							prox: 30,
+						},
+				  }
+				: {}),
+		},
+		...(enableZoom
+			? {
+					select: {
+						show: true,
+					},
+			  }
+			: {}),
 		tzDate,
 		padding: [16, 16, 8, 8],
 		bands,