Merge pull request #4430 from SigNoz/release/v0.37.2

Release/v0.37.2

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.37.1
+    image: signoz/query-service:0.37.2
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.37.1
+    image: signoz/frontend:0.37.2
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.8
+    image: signoz/signoz-otel-collector:0.88.9
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.88.8
+      image: signoz/signoz-schema-migrator:0.88.9
       deploy:
         restart_policy:
           condition: on-failure

deploy/docker/clickhouse-setup/docker-compose-core.yaml

@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.8}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.9}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.88.8
+    image: signoz/signoz-otel-collector:0.88.9
     command:
       [
         "--config=/etc/otel-collector-config.yaml",

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -164,7 +164,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.37.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.37.2}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.37.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.37.2}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.8}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.9}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.8}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.9}
     container_name: signoz-otel-collector
     command:
       [

frontend/src/AppRoutes/index.tsx

@@ -28,7 +28,11 @@ import AppReducer, { User } from 'types/reducer/app';
 import { extractDomain, isCloudUser, isEECloudUser } from 'utils/app';
 
 import PrivateRoute from './Private';
-import defaultRoutes, { AppRoutes, SUPPORT_ROUTE } from './routes';
+import defaultRoutes, {
+	AppRoutes,
+	LIST_LICENSES,
+	SUPPORT_ROUTE,
+} from './routes';
 
 function App(): JSX.Element {
 	const themeConfig = useThemeConfig();
@@ -150,6 +154,10 @@ function App(): JSX.Element {
 		if (isCloudUserVal || isEECloudUser()) {
 			const newRoutes = [...routes, SUPPORT_ROUTE];
 
+			setRoutes(newRoutes);
+		} else {
+			const newRoutes = [...routes, LIST_LICENSES];
+
 			setRoutes(newRoutes);
 		}
 

frontend/src/AppRoutes/routes.ts

@@ -191,13 +191,6 @@ const routes: AppRoutes[] = [
 		component: AllErrors,
 		key: 'ALL_ERROR',
 	},
-	{
-		path: ROUTES.LIST_LICENSES,
-		exact: true,
-		component: LicensePage,
-		isPrivate: true,
-		key: 'LIST_LICENSES',
-	},
 	{
 		path: ROUTES.ERROR_DETAIL,
 		exact: true,
@@ -320,6 +313,14 @@ export const SUPPORT_ROUTE: AppRoutes = {
 	isPrivate: true,
 };
 
+export const LIST_LICENSES: AppRoutes = {
+	path: ROUTES.LIST_LICENSES,
+	exact: true,
+	component: LicensePage,
+	isPrivate: true,
+	key: 'LIST_LICENSES',
+};
+
 export interface AppRoutes {
 	component: RouteProps['component'];
 	path: RouteProps['path'];

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -37,6 +37,12 @@
 	padding: 4px 8px;
 	padding-left: 0px !important;
 
+	&.custom-time {
+		input:not(:focus) {
+			min-width: 240px;
+		}
+	}
+
 	input::placeholder {
 		color: white;
 	}

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -178,7 +178,10 @@ function CustomTimePicker({
 	return (
 		<div className="custom-time-picker">
 			<Popover
-				className="timeSelection-input-container"
+				className={cx(
+					'timeSelection-input-container',
+					selectedTime === 'custom' && inputValue === '' ? 'custom-time' : '',
+				)}
 				placement="bottomRight"
 				getPopupContainer={popupContainer}
 				content={content}
@@ -193,12 +196,7 @@ function CustomTimePicker({
 				<Input
 					className="timeSelection-input"
 					type="text"
-					style={{
-						minWidth: '120px',
-						width: '100%',
-					}}
 					status={inputValue && inputStatus === 'error' ? 'error' : ''}
-					allowClear={!isInputFocused && selectedTime === 'custom'}
 					placeholder={
 						isInputFocused
 							? 'Time Format (1m or 2h or 3d or 4w)'

frontend/src/components/Logs/RawLogView/index.tsx

@@ -13,6 +13,8 @@ import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import { FlatLogData } from 'lib/logs/flatLogData';
+import { isEmpty, isUndefined } from 'lodash-es';
 import {
 	KeyboardEvent,
 	MouseEvent,
@@ -39,10 +41,13 @@ function RawLogView({
 	data,
 	linesPerRow,
 	isTextOverflowEllipsisDisabled,
+	selectedFields = [],
 }: RawLogViewProps): JSX.Element {
 	const { isHighlighted, isLogsExplorerPage, onLogCopy } = useCopyLogLink(
 		data.id,
 	);
+	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
+
 	const {
 		activeLog: activeContextLog,
 		onSetActiveLog: handleSetActiveContextLog,
@@ -62,12 +67,31 @@ function RawLogView({
 
 	const severityText = data.severity_text ? `${data.severity_text} |` : '';
 
+	const updatedSelecedFields = useMemo(
+		() => selectedFields.filter((e) => e.name !== 'id'),
+		[selectedFields],
+	);
+
+	const attributesValues = updatedSelecedFields
+		.map((field) => flattenLogData[field.name])
+		.filter((attribute) => !isUndefined(attribute) && !isEmpty(attribute));
+
+	let attributesText = attributesValues.join(' | ');
+
+	if (attributesText.length > 0) {
+		attributesText += ' | ';
+	}
+
 	const text = useMemo(
 		() =>
 			typeof data.timestamp === 'string'
-				? `${dayjs(data.timestamp).format()} | ${severityText} ${data.body}`
+				? `${dayjs(data.timestamp).format()} | ${attributesText} ${severityText} ${
-				: `${dayjs(data.timestamp / 1e6).format()} | ${severityText} ${data.body}`,
+						data.body
-		[data.timestamp, data.body, severityText],
+				  }`
+				: `${dayjs(
+						data.timestamp / 1e6,
+				  ).format()} | ${attributesText} ${severityText} ${data.body}`,
+		[data.timestamp, data.body, severityText, attributesText],
 	);
 
 	const handleClickExpand = useCallback(() => {

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,3 +1,4 @@
+import { IField } from 'types/api/logs/fields';
 import { ILog } from 'types/api/logs/log';
 
 export interface RawLogViewProps {
@@ -6,6 +7,7 @@ export interface RawLogViewProps {
 	isTextOverflowEllipsisDisabled?: boolean;
 	data: ILog;
 	linesPerRow: number;
+	selectedFields?: IField[];
 }
 
 export interface RawLogContentProps {

frontend/src/container/FullScreenHeader/FullScreenHeader.styles.scss

@@ -1,6 +1,6 @@
-.full-view-header-container {
+.full-screen-header-container {
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
 	align-items: center;
 	padding: 24px 0;
 

frontend/src/container/FullScreenHeader/FullScreenHeader.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import './FullViewHeader.styles.scss';
+import './FullScreenHeader.styles.scss';
 
 import history from 'lib/history';
 
-export default function FullViewHeader({
+export default function FullScreenHeader({
 	overrideRoute,
 }: {
 	overrideRoute?: string;
@@ -13,7 +13,7 @@ export default function FullViewHeader({
 		history.push(overrideRoute || '/');
 	};
 	return (
-		<div className="full-view-header-container">
+		<div className="full-screen-header-container">
 			<div className="brand-logo" onClick={handleLogoClick}>
 				<img src="/Logos/signoz-brand-logo.svg" alt="SigNoz" />
 
@@ -23,6 +23,6 @@ export default function FullViewHeader({
 	);
 }
 
-FullViewHeader.defaultProps = {
+FullScreenHeader.defaultProps = {
 	overrideRoute: '/',
 };

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -105,7 +105,7 @@ function FullView({
 		panelTypeAndGraphManagerVisibility: PANEL_TYPES_VS_FULL_VIEW_TABLE,
 	});
 
-	const chartData = getUPlotChartData(response?.data?.payload);
+	const chartData = getUPlotChartData(response?.data?.payload, widget.fillSpans);
 
 	const isDarkMode = useIsDarkMode();
 

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -196,6 +196,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 										name={currentWidget?.id || ''}
 										headerMenuList={widgetActions}
 										variables={variables}
+										fillSpans={currentWidget?.fillSpans}
 									/>
 								</Card>
 							</CardContainer>

frontend/src/container/ListOfDashboard/utils.ts

@@ -3,18 +3,25 @@ import { Dashboard } from 'types/api/dashboard/getAll';
 export const filterDashboard = (
 	searchValue: string,
 	dashboardList: Dashboard[],
-): any[] => {
+): Dashboard[] => {
-	// Convert the searchValue to lowercase for case-insensitive search
+	const searchValueLowerCase = searchValue?.toLowerCase();
-	const searchValueLowerCase = searchValue.toLowerCase();
 
-	// Use the filter method to find matching objects
+	// Filter by title, description, tags
 	return dashboardList.filter((item: Dashboard) => {
-		// Convert each property value to lowercase for case-insensitive search
+		const { title, description, tags } = item.data;
-		const itemValues = Object.values(item?.data).map((value) =>
+		const itemValuesNew = [title, description];
-			value.toString().toLowerCase(),
+
-		);
+		if (tags && tags.length > 0) {
+			itemValuesNew.push(...tags);
+		}
 
 		// Check if any property value contains the searchValue
-		return itemValues.some((value) => value.includes(searchValueLowerCase));
+		return itemValuesNew.some((value) => {
+			if (value) {
+				return value.toLowerCase().includes(searchValueLowerCase);
+			}
+
+			return false;
+		});
 	});
 };

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -70,7 +70,12 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView key={log.id} data={log} linesPerRow={options.maxLines} />
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+					/>
 				);
 			}
 

frontend/src/container/LogsExplorerList/index.tsx

@@ -80,7 +80,12 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView key={log.id} data={log} linesPerRow={options.maxLines} />
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={options.maxLines}
+						selectedFields={selectedFields}
+					/>
 				);
 			}
 

frontend/src/container/LogsTable/index.tsx

@@ -72,7 +72,14 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 			const log = logs[index];
 
 			if (viewMode === 'raw') {
-				return <RawLogView key={log.id} data={log} linesPerRow={linesPerRow} />;
+				return (
+					<RawLogView
+						key={log.id}
+						data={log}
+						linesPerRow={linesPerRow}
+						selectedFields={selected}
+					/>
+				);
 			}
 
 			return (

frontend/src/container/OnboardingContainer/OnboardingContainer.tsx

@@ -6,7 +6,7 @@ import { ArrowRightOutlined } from '@ant-design/icons';
 import { Button, Card, Typography } from 'antd';
 import getIngestionData from 'api/settings/getIngestionData';
 import cx from 'classnames';
-import FullViewHeader from 'container/FullViewHeader/FullViewHeader';
+import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
 import useAnalytics from 'hooks/analytics/useAnalytics';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useEffect, useState } from 'react';
@@ -211,7 +211,7 @@ export default function Onboarding(): JSX.Element {
 		<div className={cx('container', isDarkMode ? 'darkMode' : 'lightMode')}>
 			{activeStep === 1 && (
 				<>
-					<FullViewHeader />
+					<FullScreenHeader />
 					<div className="onboardingHeader">
 						<h1> Select a use-case to get started</h1>
 					</div>

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -30,6 +30,7 @@ export default function DataSource(): JSX.Element {
 		selectedDataSource,
 		selectedFramework,
 		updateSelectedDataSource,
+		updateSelectedEnvironment,
 		updateServiceName,
 		updateSelectedFramework,
 	} = useOnboardingContext();
@@ -89,6 +90,7 @@ export default function DataSource(): JSX.Element {
 						key={dataSource.name}
 						onClick={(): void => {
 							updateSelectedFramework(null);
+							updateSelectedEnvironment(null);
 							updateSelectedDataSource(dataSource);
 							form.setFieldsValue({ selectFramework: null });
 						}}

frontend/src/container/OptionsMenu/MaxLinesField/styles.ts

@@ -5,6 +5,7 @@ export const MaxLinesFieldWrapper = styled.div`
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	margin-bottom: 1.125rem;
 `;
 
 export const MaxLinesInput = styled(InputNumber)`

frontend/src/container/OptionsMenu/index.tsx

@@ -31,9 +31,7 @@ function OptionsMenu({
 				{selectedOptionFormat === OptionFormatTypes.RAW && config?.maxLines && (
 					<MaxLinesField config={config.maxLines} />
 				)}
-				{(selectedOptionFormat === OptionFormatTypes.LIST ||
+				{config?.addColumn && <AddColumnField config={config.addColumn} />}
-					selectedOptionFormat === OptionFormatTypes.TABLE) &&
-					config?.addColumn && <AddColumnField config={config.addColumn} />}
 			</OptionsContentWrapper>
 		),
 		[config, selectedOptionFormat],

frontend/src/container/SideNav/SideNav.tsx

@@ -199,10 +199,7 @@ function SideNav({
 
 	useEffect(() => {
 		if (isCloudUser() || isEECloudUser()) {
-			const updatedUserManagementMenuItems = [
+			const updatedUserManagementMenuItems = [helpSupportMenuItem];
-				helpSupportMenuItem,
-				manageLicenseMenuItem,
-			];
 
 			setUserManagementMenuItems(updatedUserManagementMenuItems);
 		} else if (currentVersion && latestVersion) {

frontend/src/container/TopNav/DateTimeSelection/DateTimeSelection.styles.scss

@@ -0,0 +1,3 @@
+.date-time-selection-container {
+	margin-bottom: 16px;
+}

frontend/src/container/TopNav/DateTimeSelection/index.tsx

@@ -1,3 +1,5 @@
+import './DateTimeSelection.styles.scss';
+
 import { SyncOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 import getLocalStorageKey from 'api/browser/localstorage/get';
@@ -211,7 +213,6 @@ function DateTimeSelection({
 	};
 
 	const onCustomDateHandler = (dateTimeRange: DateTimeRangeType): void => {
-		console.log('dateTimeRange', dateTimeRange);
 		if (dateTimeRange !== null) {
 			const [startTimeMoment, endTimeMoment] = dateTimeRange;
 			if (startTimeMoment && endTimeMoment) {
@@ -295,7 +296,7 @@ function DateTimeSelection({
 	}, [location.pathname, updateTimeInterval, globalTimeLoading]);
 
 	return (
-		<>
+		<div className="date-time-selection-container">
 			<Form
 				form={formSelector}
 				layout="inline"
@@ -336,7 +337,7 @@ function DateTimeSelection({
 				</FormContainer>
 			</Form>
 
-			{!hasSelectedTimeError && (
+			{!hasSelectedTimeError && selectedTime !== 'custom' && (
 				<RefreshText
 					{...{
 						onLastRefreshHandler,
@@ -352,7 +353,7 @@ function DateTimeSelection({
 					setCustomDTPickerVisible(false);
 				}}
 			/>
-		</>
+		</div>
 	);
 }
 

frontend/src/container/TopNav/DateTimeSelection/styles.ts

@@ -24,7 +24,6 @@ interface Props {
 }
 
 export const RefreshTextContainer = styled.div<Props>`
-	min-height: 2rem;
 	visibility: ${({ refreshButtonHidden }): string =>
 		refreshButtonHidden ? 'hidden' : 'visible'};
 `;

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -10,7 +10,7 @@ import { Button, Card, Skeleton, Typography } from 'antd';
 import updateCreditCardApi from 'api/billing/checkout';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import ROUTES from 'constants/routes';
-import FullViewHeader from 'container/FullViewHeader/FullViewHeader';
+import FullScreenHeader from 'container/FullScreenHeader/FullScreenHeader';
 import useAnalytics from 'hooks/analytics/useAnalytics';
 import useLicense from 'hooks/useLicense';
 import { useNotifications } from 'hooks/useNotifications';
@@ -106,7 +106,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 
 	return (
 		<>
-			<FullViewHeader overrideRoute={ROUTES.WORKSPACE_LOCKED} />
+			<FullScreenHeader overrideRoute={ROUTES.WORKSPACE_LOCKED} />
 
 			<Card className="workspace-locked-container">
 				{isLoadingLicenseData || !licensesData?.payload?.workSpaceBlock ? (

go.mod

@@ -5,7 +5,7 @@ go 1.21
 require (
 	github.com/ClickHouse/clickhouse-go/v2 v2.15.0
 	github.com/SigNoz/govaluate v0.0.0-20220522085550-d19c08c206cb
-	github.com/SigNoz/signoz-otel-collector v0.88.8
+	github.com/SigNoz/signoz-otel-collector v0.88.9
 	github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974
 	github.com/SigNoz/zap_otlp/zap_otlp_sync v0.0.0-20230822164844-1b861a431974
 	github.com/antonmedv/expr v1.15.3

go.sum

@@ -98,8 +98,8 @@ github.com/SigNoz/govaluate v0.0.0-20220522085550-d19c08c206cb h1:bneLSKPf9YUSFm
 github.com/SigNoz/govaluate v0.0.0-20220522085550-d19c08c206cb/go.mod h1:JznGDNg9x1cujDKa22RaQOimOvvEfy3nxzDGd8XDgmA=
 github.com/SigNoz/prometheus v1.9.78 h1:bB3yuDrRzi/Mv00kWayR9DZbyjTuGfendSqISyDcXiY=
 github.com/SigNoz/prometheus v1.9.78/go.mod h1:MffmFu2qFILQrOHehx3D0XjYtaZMVfI+Ppeiv98x4Ww=
-github.com/SigNoz/signoz-otel-collector v0.88.8 h1:oa/0gSfkGhjzXtz1htzWBQx3p4VhBPs5iwMRxqfa2uo=
+github.com/SigNoz/signoz-otel-collector v0.88.9 h1:7bbJSXrSZcQsdEVVLsjsNXm/bWe9MhKu8qfXp8MlXQM=
-github.com/SigNoz/signoz-otel-collector v0.88.8/go.mod h1:7I4FWwraVSnDywsPNbo8TdHDsPxShtYkGU5usr6dTtk=
+github.com/SigNoz/signoz-otel-collector v0.88.9/go.mod h1:7I4FWwraVSnDywsPNbo8TdHDsPxShtYkGU5usr6dTtk=
 github.com/SigNoz/zap_otlp v0.1.0 h1:T7rRcFN87GavY8lDGZj0Z3Xv6OhJA6Pj3I9dNPmqvRc=
 github.com/SigNoz/zap_otlp v0.1.0/go.mod h1:lcHvbDbRgvDnPxo9lDlaL1JK2PyOyouP/C3ynnYIvyo=
 github.com/SigNoz/zap_otlp/zap_otlp_encoder v0.0.0-20230822164844-1b861a431974 h1:PKVgdf83Yw+lZJbFtNGBgqXiXNf3+kOXW2qZ7Ms7OaY=

pkg/query-service/tests/test-deploy/docker-compose.yaml

@@ -192,7 +192,7 @@ services:
     <<: *db-depend
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.8}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.9}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -205,7 +205,7 @@ services:
       #   condition: service_healthy
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.88.8
+    image: signoz/signoz-otel-collector:0.88.9
     container_name: signoz-otel-collector
     command:
       [