Merge branch 'main' of https://github.com/praveen5959/console into json-default-view

Author: praveen5959

package.json

@@ -26,6 +26,7 @@
 		"@mantine/hooks": "^7.8.1",
 		"@mantine/notifications": "^7.8.1",
 		"@monaco-editor/react": "^4.5.1",
+		"@reduxjs/toolkit": "^2.5.0",
 		"@tabler/icons-react": "^3.3.0",
 		"@types/js-cookie": "^3.0.3",
 		"axios": "^1.4.0",
@@ -52,6 +53,7 @@
 		"react-grid-layout": "^1.4.4",
 		"react-query": "^3.39.3",
 		"react-querybuilder": "^6.5.5",
+		"react-redux": "^9.2.0",
 		"react-resizable": "^3.0.5",
 		"react-resizable-panels": "^0.0.53",
 		"react-router-dom": "^6.14.0",

pnpm-lock.yaml

@@ -1,8 +1,12 @@
+export type QueryEngineType = 'Trino' | 'Parseable' | undefined;
+
+export type LicenseType = 'AGPL-3.0-only' | undefined;
+
 export type AboutData = {
 	commit: string;
 	deploymentId: string;
 	latestVersion: string;
-	license: string;
+	license: LicenseType;
 	mode: string;
 	staging: string;
 	store: { type: string; path: string };

src/@types/parseable/api/about.ts

@@ -5,12 +5,15 @@ import { Button, Divider, Image, Stack } from '@mantine/core';
 import { FC, useCallback } from 'react';
 import styles from './styles/Header.module.css';
 import HelpModal from './HelpModal';
+import _ from 'lodash';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { OSS_LICENSE_TYPE } from '@/constants';
 
 const PrimaryHeader: FC = () => {
 	const classes = styles;
 	const { logoContainer, imageSty } = classes;
 	const [maximized, setAppStore] = useAppStore((store) => store.maximized);
+	const [instanceConfig] = useAppStore((store) => store.instanceConfig);
 	const toggleHelpModal = useCallback(() => setAppStore(appStoreReducers.toggleHelpModal), []);
 	if (maximized) return null;
 
@@ -31,14 +34,16 @@ const PrimaryHeader: FC = () => {
 				className={classes.rightSection}
 				style={{ flexDirection: 'row', height: '100%', justifyContent: 'flex-end' }}
 				gap={8}>
-				<Button
-					variant="outline"
-					style={{ border: 'none' }}
-					component={'a'}
-					href="mailto:[email protected]?subject=Production%20Support%20Query"
-					target="_blank">
-					Upgrade
-				</Button>
+				{instanceConfig?.license && _.isEqual(instanceConfig?.license, OSS_LICENSE_TYPE) && (
+					<Button
+						variant="outline"
+						style={{ border: 'none' }}
+						component={'a'}
+						href="mailto:[email protected]?subject=Production%20Support%20Query"
+						target="_blank">
+						Upgrade
+					</Button>
+				)}
 				<Divider orientation="vertical" />
 				<Button onClick={toggleHelpModal} style={{ border: 'none' }} variant="outline">
 					Help

src/components/Header/PrimaryHeader.tsx

@@ -4,6 +4,8 @@ import { useAbout } from '@/hooks/useGetAbout';
 import { IconInfoCircle } from '@tabler/icons-react';
 import styles from './styles/InfoModal.module.css';
 import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
+import { OSS_LICENSE_TYPE } from '@/constants';
+import _ from 'lodash';
 
 const { setInstanceConfig } = appStoreReducers;
 
@@ -60,14 +62,16 @@ const InfoModal: FC<InfoModalProps> = (props) => {
 							<Box className={aboutTextInnerBox}>
 								<Text className={aboutTextKey}> License: </Text>
 								<Text className={aboutTextValue}> {getAboutData?.data.license} </Text>
-								<Button
-									variant="outline"
-									component={'a'}
-									href="mailto:[email protected]?subject=Production%20Support%20Query"
-									target="_blank"
-									className={actionBtn}>
-									Upgrade to production support
-								</Button>
+								{_.isEqual(getAboutData?.data.license, OSS_LICENSE_TYPE) && (
+									<Button
+										variant="outline"
+										component={'a'}
+										href="mailto:[email protected]?subject=Production%20Support%20Query"
+										target="_blank"
+										className={actionBtn}>
+										Upgrade to production support
+									</Button>
+								)}
 							</Box>
 						</Box>
 						<Box className={aboutTextBox}>

src/components/Navbar/infoModal.tsx

@@ -0,0 +1,3 @@
+const OSS_LICENSE_TYPE = 'AGPL-3.0-only';
+
+export { OSS_LICENSE_TYPE };

src/constants/index.ts

@@ -3,7 +3,7 @@ export const HOME_ROUTE = '/';
 export const LOGIN_ROUTE = '/login';
 // -----
 export const MANAGE_ROUTE = '/:streamName/manage';
-export const LIVE_TAIL_ROUTE = '/:streamName/live-tail';
+// export const LIVE_TAIL_ROUTE = '/:streamName/live-tail';
 export const EXPLORE_ROUTE = '/:streamName/explore';
 // -----
 export const USERS_MANAGEMENT_ROUTE = '/users';
@@ -13,14 +13,18 @@ export const STREAM_ROUTE = '/:streamName/:view?';
 export const DASHBOARDS_ROUTE = '/dashboards';
 export const CORRELATION_ROUTE = '/correlation';
 
-export const STREAM_VIEWS = ['explore', 'manage', 'live-tail'];
+export const STREAM_VIEWS = [
+	'explore',
+	'manage',
+	//  'live-tail'
+];
 
 export const PATHS = {
 	all: '/*',
 	home: '/',
 	explore: '/:streamName/:view?',
 	login: '/login',
-	liveTail: '/:streamName/:view?',
+	// liveTail: '/:streamName/:view?',
 	stats: '/:streamName/stats',
 	config: '/:streamName/config',
 	users: '/users',

src/constants/routes.ts

@@ -13,6 +13,8 @@ import Mantine from '@/components/Mantine';
 import { BrowserRouter } from 'react-router-dom';
 import ErrorBoundary from './components/ErrorBoundary';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { Provider } from 'react-redux';
+import { store } from './store';
 
 const queryClient = new QueryClient();
 
@@ -21,7 +23,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
 		<Mantine>
 			<ErrorBoundary>
 				<BrowserRouter>
-					<App />
+					<Provider store={store}>
+						<App />
+					</Provider>
 				</BrowserRouter>
 			</ErrorBoundary>
 		</Mantine>

src/main.tsx

@@ -4,12 +4,14 @@ import { useLogsStore, logsStoreReducers } from '../../providers/LogsProvider';
 import { useQueryLogs } from '@/hooks/useQueryLogs';
 import { useFetchCount } from '@/hooks/useQueryResult';
 import { useStreamStore } from '../../providers/StreamProvider';
+import useParamsController from '@/pages/Stream/hooks/useParamsController';
 import _ from 'lodash';
 
 const { setCleanStoreForStreamChange } = logsStoreReducers;
 const { syncTimeRange } = appStoreReducers;
 
 const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean }) => {
+	const { isStoreSynced } = useParamsController();
 	const { schemaLoading, infoLoading } = props;
 	const [currentStream] = useAppStore((store) => store.currentStream);
 	const [{ timeRange }, setAppStore] = useAppStore((store) => store);
@@ -25,6 +27,7 @@ const useLogsFetcher = (props: { schemaLoading: boolean; infoLoading: boolean })
 	const showTable = hasContentLoaded && !hasNoData && !queryLogsError;
 
 	useEffect(() => {
+		if (!isStoreSynced) return;
 		setAppStore(syncTimeRange);
 		setLogsStore(setCleanStoreForStreamChange);
 	}, [currentStream]);

src/pages/Stream/Views/Explore/useLogsFetcher.ts

@@ -674,7 +674,7 @@ const Alerts = (props: {
 		setAlertModalOpen(false);
 	}, []);
 
-	const hideAlerts = !props.hasAlertsAccess || props.isStandAloneMode === false;
+	const hideAlerts = true;
 
 	return (
 		<Stack className={classes.sectionContainer} gap={0} style={{ flex: 1 }}>
@@ -683,7 +683,9 @@ const Alerts = (props: {
 			{props.isError ? (
 				<ErrorView />
 			) : hideAlerts ? (
-				<RestrictedView msg={!props.isStandAloneMode ? 'Alerts is unavailable on distributed mode.' : ''} />
+				<RestrictedView
+					msg={'Alerts are deprecated.  \n New way to set alerts will be available in the next release.'}
+				/>
 			) : (
 				<AlertList
 					selectAlert={selectAlert}