diff --git a/src/pages/Logs/Context.tsx b/src/pages/Logs/Context.tsx
index 12d6d5f7..dcdf2db1 100644
--- a/src/pages/Logs/Context.tsx
+++ b/src/pages/Logs/Context.tsx
@@ -1,4 +1,4 @@
-import type {Log } from '@/@types/parseable/api/query';
+import type { Log } from '@/@types/parseable/api/query';
import useSubscribeState, { SubData } from '@/hooks/useSubscribeState';
import type { FC } from 'react';
import { ReactNode, createContext, useContext } from 'react';
@@ -9,7 +9,6 @@ const { Provider } = Context;
export const LOG_QUERY_LIMITS = [30, 50, 100, 150, 200];
-
interface LogsPageContextState {
subLogStreamError: SubData
;
subViewLog: SubData;
diff --git a/src/pages/Logs/LogRow.tsx b/src/pages/Logs/LogRow.tsx
index b982bfce..598a8244 100644
--- a/src/pages/Logs/LogRow.tsx
+++ b/src/pages/Logs/LogRow.tsx
@@ -26,7 +26,7 @@ const LogRow: FC = (props) => {
};
const { classes } = useLogTableStyles();
- const { trStyle,trEvenStyle } = classes;
+ const { trStyle, trEvenStyle } = classes;
return (
@@ -38,7 +38,7 @@ const LogRow: FC = (props) => {
Hopefully there will be a plan to add a p_id filed internally
For now index is a better option for uniqueness, if you have a better way to handle this let us know
*/
- onShow(log)}>
+ onShow(log)}>
{logsSchema.map((logSchema, logSchemaIndex) => {
if (!isColumnActive(logSchema.name) || skipFields.includes(logSchema.name)) return null;
diff --git a/src/pages/Logs/LogTable.tsx b/src/pages/Logs/LogTable.tsx
index d9d16f40..09b1a314 100644
--- a/src/pages/Logs/LogTable.tsx
+++ b/src/pages/Logs/LogTable.tsx
@@ -26,8 +26,8 @@ const LogTable: FC = () => {
state: { subLogStreamError },
} = useLogsPageContext();
const {
- state: { subLogSearch ,subLogQuery , subRefreshInterval ,subLogSelectedTimeRange},
- }= useHeaderContext();
+ state: { subLogSearch, subLogQuery, subRefreshInterval, subLogSelectedTimeRange },
+ } = useHeaderContext();
const [refreshInterval, setRefreshInterval] = useMountedState(null);
const [logStreamError, setLogStreamError] = useMountedState(null);
@@ -119,19 +119,19 @@ const LogTable: FC = () => {
useEffect(() => {
if (subRefreshInterval.get()) {
- const interval = setInterval(() => {
- if(subLogSelectedTimeRange.get().includes('Past')){
- const now =dayjs();
- const timeDiff=subLogQuery.get().endTime.getTime()-subLogQuery.get().startTime.getTime();
- subLogQuery.set((state) => {
- state.startTime = now.subtract(timeDiff).toDate();
- state.endTime = now.toDate();
- });
- }
- }, subRefreshInterval.get() as number);
- return () => clearInterval(interval);
+ const interval = setInterval(() => {
+ if (subLogSelectedTimeRange.get().includes('Past')) {
+ const now = dayjs();
+ const timeDiff = subLogQuery.get().endTime.getTime() - subLogQuery.get().startTime.getTime();
+ subLogQuery.set((state) => {
+ state.startTime = now.subtract(timeDiff).toDate();
+ state.endTime = now.toDate();
+ });
+ }
+ }, subRefreshInterval.get() as number);
+ return () => clearInterval(interval);
}
- }, [refreshInterval]);
+ }, [refreshInterval]);
useEffect(() => {
const query = subLogQuery.get();
@@ -139,7 +139,7 @@ const LogTable: FC = () => {
if (query.streamName) {
if (logsSchema) {
resetStreamData();
- resetLogsData
+ resetLogsData;
}
getDataSchema(query.streamName);
getQueryData(query);
@@ -197,12 +197,16 @@ const LogTable: FC = () => {
/>
-
- {
className={paginationRow}
/>
)}
-
) : (
diff --git a/src/pages/Logs/ViewLog.tsx b/src/pages/Logs/ViewLog.tsx
index cdc62c45..0a6bc929 100644
--- a/src/pages/Logs/ViewLog.tsx
+++ b/src/pages/Logs/ViewLog.tsx
@@ -106,9 +106,9 @@ const DataChip: FC = (props) => {
- {[...dataList].map((data,i) => {
+ {[...dataList].map((data, i) => {
return (
-
+
{data}
);
diff --git a/src/pages/Logs/index.tsx b/src/pages/Logs/index.tsx
index 7eab2a2b..5953dfcc 100644
--- a/src/pages/Logs/index.tsx
+++ b/src/pages/Logs/index.tsx
@@ -5,14 +5,12 @@ import LogTable from './LogTable';
import { useLogsStyles } from './styles';
import ViewLog from './ViewLog';
-
const Logs: FC = () => {
useDocumentTitle('Parseable | Dashboard');
const { classes } = useLogsStyles();
const { container } = classes;
-
return (
;
+ result: SubData;
subSchemaToggle: SubData;
}
@@ -28,12 +27,12 @@ interface QueryPageProviderProps {
}
const QueryPageProvider: FC = ({ children }) => {
- const result = useSubscribeState(defaultQueryResult);
+ const result = useSubscribeState(defaultQueryResult);
const subSchemaToggle = useSubscribeState(false);
const state: QueryPageContextState = {
result,
- subSchemaToggle
+ subSchemaToggle,
};
const methods: QueryPageContextMethods = {};
diff --git a/src/pages/Query/ErrorMarker.tsx b/src/pages/Query/ErrorMarker.tsx
index ea7283f1..fa204774 100644
--- a/src/pages/Query/ErrorMarker.tsx
+++ b/src/pages/Query/ErrorMarker.tsx
@@ -20,43 +20,40 @@ export var ErrorMarker: any[] = [];
// });
// }
export function errChecker(code: string, streamName: string) {
+ let arr = code.split('\r\n');
+ ErrorMarker = [];
+ arr.map((wordsString: string, j: any) => {
+ let wordsArray = wordsString.split(' ');
+ wordsArray.map((word: string, i: any) => {
+ if (word.toLowerCase() === 'from' && wordsArray[i + 1]) {
+ if (wordsArray[i + 1] !== streamName && wordsArray[i + 1] !== `${streamName};`) {
+ ErrorMarker.push({
+ startLineNumber: j + 1,
+ endLineNumber: j + 1,
+ startColumn: wordsString.indexOf(wordsArray[i + 1]) + 1, //i+1,
+ endColumn: wordsString.indexOf(wordsArray[i + 1]) + wordsArray[i + 1].length + 1,
+ message: `Schema support available for ${streamName} `,
+ });
+ }
+ }
+ });
+ });
+ return;
- let arr = code.split('\r\n');
- ErrorMarker = [];
- arr.map((wordsString:string, j:any) => {
- let wordsArray=wordsString.split(' ');
- wordsArray.map((word:string, i:any) => {
- if (word.toLowerCase() === 'from' && wordsArray[i + 1]) {
- if(wordsArray[i+1]!==streamName && wordsArray[i+1]!==`${streamName};`){
- ErrorMarker.push({
- startLineNumber: j+1,
- endLineNumber: j+1,
- startColumn: wordsString.indexOf(wordsArray[i+1])+1, //i+1,
- endColumn: wordsString.indexOf(wordsArray[i+1]) + wordsArray[i+1].length+1,
- message: `Schema support available for ${streamName} `,
-
- });
- }
- }
- })
- });
- return;
+ // const blocksArray = GetCodeBlocks(code);
- // const blocksArray = GetCodeBlocks(code);
-
- // ErrorMarker = [];
- // for (var i = 0; i < blocksArray.length; ++i) {
- // const headLineArray = blocksArray[i].blockText.split(/\r?\n/)[0].split(" ");
- // if (keywords.indexOf(headLineArray[0]) < 0) {
- // ErrorMarker.push({
- // startLineNumber: blocksArray[i].blockStartLine,
- // endLineNumber: blocksArray[i].blockStartLine,
- // startColumn: 0,
- // endColumn: headLineArray[0].length,
- // message: "Expected one of GET/POST/PUT/DELETE/HEAD",
- // severity: "monaco.MarkerSeverity.Error",
- // });
- // }
- // }
-
+ // ErrorMarker = [];
+ // for (var i = 0; i < blocksArray.length; ++i) {
+ // const headLineArray = blocksArray[i].blockText.split(/\r?\n/)[0].split(" ");
+ // if (keywords.indexOf(headLineArray[0]) < 0) {
+ // ErrorMarker.push({
+ // startLineNumber: blocksArray[i].blockStartLine,
+ // endLineNumber: blocksArray[i].blockStartLine,
+ // startColumn: 0,
+ // endColumn: headLineArray[0].length,
+ // message: "Expected one of GET/POST/PUT/DELETE/HEAD",
+ // severity: "monaco.MarkerSeverity.Error",
+ // });
+ // }
+ // }
}
diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx
index 754e7e91..3f8420c5 100644
--- a/src/pages/Query/QueryCodeEditor.tsx
+++ b/src/pages/Query/QueryCodeEditor.tsx
@@ -4,7 +4,7 @@ import { useQueryPageContext } from './Context';
import { useHeaderContext } from '@/layouts/MainLayout/Context';
import { Box, Button, Text, px } from '@mantine/core';
import { useQueryResult } from '@/hooks/useQueryResult';
-import { ErrorMarker, errChecker } from "./ErrorMarker";
+import { ErrorMarker, errChecker } from './ErrorMarker';
import { notifications } from '@mantine/notifications';
import { IconPlayerPlayFilled, IconCheck, IconFileAlert, IconFileInfo } from '@tabler/icons-react';
import useMountedState from '@/hooks/useMountedState';
@@ -12,142 +12,141 @@ import { useQueryCodeEditorStyles } from './styles';
import dayjs from 'dayjs';
const QueryCodeEditor: FC = () => {
- const { state: { subLogQuery, subRefreshInterval, subLogSelectedTimeRange } } = useHeaderContext();
- const { state: { result, subSchemaToggle } } = useQueryPageContext();
+ const {
+ state: { subLogQuery, subRefreshInterval, subLogSelectedTimeRange },
+ } = useHeaderContext();
+ const {
+ state: { result, subSchemaToggle },
+ } = useQueryPageContext();
- const { data: queryResult, getQueryData, error, resetData } = useQueryResult();
- const editorRef = React.useRef();
- const monacoRef = React.useRef();
- const [isSchemaOpen, setIsSchemaOpen] = useMountedState(false);
- const [query, setQuery] = React.useState(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100`);
- const [refreshInterval, setRefreshInterval] = useMountedState(null);
+ const { data: queryResult, getQueryData, error, resetData } = useQueryResult();
+ const editorRef = React.useRef();
+ const monacoRef = React.useRef();
+ const [isSchemaOpen, setIsSchemaOpen] = useMountedState(false);
+ const [query, setQuery] = React.useState(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100`);
+ const [refreshInterval, setRefreshInterval] = useMountedState(null);
- const handleEditorChange = (code: any) => {
- setQuery(code);
- errChecker(code, subLogQuery.get().streamName);
- monacoRef.current?.editor.setModelMarkers(
- editorRef.current?.getModel(),
- "owner",
- ErrorMarker
- );
- };
+ const handleEditorChange = (code: any) => {
+ setQuery(code);
+ errChecker(code, subLogQuery.get().streamName);
+ monacoRef.current?.editor.setModelMarkers(editorRef.current?.getModel(), 'owner', ErrorMarker);
+ };
- useEffect(() => {
- if (subRefreshInterval.get()) {
- const interval = setInterval(() => {
- runQuery();
- }, subRefreshInterval.get() as number);
- return () => clearInterval(interval);
- }
- }, [refreshInterval, query]);
+ useEffect(() => {
+ if (subRefreshInterval.get()) {
+ const interval = setInterval(() => {
+ runQuery();
+ }, subRefreshInterval.get() as number);
+ return () => clearInterval(interval);
+ }
+ }, [refreshInterval, query]);
- useEffect(() => {
- const listener = subSchemaToggle.subscribe(setIsSchemaOpen);
- const refreshIntervalListener = subRefreshInterval.subscribe(setRefreshInterval);
- return () => {
- listener();
- refreshIntervalListener();
- };
- }, [subSchemaToggle.get()]);
+ useEffect(() => {
+ const listener = subSchemaToggle.subscribe(setIsSchemaOpen);
+ const refreshIntervalListener = subRefreshInterval.subscribe(setRefreshInterval);
+ return () => {
+ listener();
+ refreshIntervalListener();
+ };
+ }, [subSchemaToggle.get()]);
- useEffect(() => {
- if (subLogQuery.get().streamName) {
- setQuery(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100;`);
- result.set("");
- }
- }, [subLogQuery.get().streamName]);
+ useEffect(() => {
+ if (subLogQuery.get().streamName) {
+ setQuery(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100;`);
+ result.set('');
+ }
+ }, [subLogQuery.get().streamName]);
- function handleEditorDidMount(editor: any, monaco: any) {
- editorRef.current = editor;
- monacoRef.current = monaco;
- }
- const runQuery = () => {
- resetData();
- notifications.show({
- id: 'load-data',
- loading: true,
- color: '#545BEB',
- title: 'Running Query',
- message: 'Data will be loaded.',
- autoClose: false,
- withCloseButton: false,
- });
- if (subLogSelectedTimeRange.get().includes('Past')) {
- const now = dayjs();
- const timeDiff = subLogQuery.get().endTime.getTime() - subLogQuery.get().startTime.getTime();
- subLogQuery.set((state) => {
- state.startTime = now.subtract(timeDiff).toDate();
- state.endTime = now.toDate();
- });
- }
- const parsedQuery = query.replace(/(\r\n|\n|\r)/gm, "");
- getQueryData(subLogQuery.get(), parsedQuery);
+ function handleEditorDidMount(editor: any, monaco: any) {
+ editorRef.current = editor;
+ monacoRef.current = monaco;
+ }
+ const runQuery = () => {
+ resetData();
+ notifications.show({
+ id: 'load-data',
+ loading: true,
+ color: '#545BEB',
+ title: 'Running Query',
+ message: 'Data will be loaded.',
+ autoClose: false,
+ withCloseButton: false,
+ });
+ if (subLogSelectedTimeRange.get().includes('Past')) {
+ const now = dayjs();
+ const timeDiff = subLogQuery.get().endTime.getTime() - subLogQuery.get().startTime.getTime();
+ subLogQuery.set((state) => {
+ state.startTime = now.subtract(timeDiff).toDate();
+ state.endTime = now.toDate();
+ });
+ }
+ const parsedQuery = query.replace(/(\r\n|\n|\r)/gm, '');
+ getQueryData(subLogQuery.get(), parsedQuery);
+ };
+ useEffect(() => {
+ if (error) {
+ notifications.update({
+ id: 'load-data',
+ color: 'red',
+ title: 'Error Occured',
+ message: 'Error Occured, please check your query and try again',
+ icon:
-
- Query
-
-
- subSchemaToggle.set(!isSchemaOpen)}>
-
-
-
-
-
- );
+ return (
+
+
+ Query
+
+ subSchemaToggle.set(!isSchemaOpen)}>
+
+
+
+
+
+
+
+
+ );
};
export default QueryCodeEditor;
diff --git a/src/pages/Query/QueryResultEditor.tsx b/src/pages/Query/QueryResultEditor.tsx
index b07f4a87..8ab12e29 100644
--- a/src/pages/Query/QueryResultEditor.tsx
+++ b/src/pages/Query/QueryResultEditor.tsx
@@ -3,91 +3,93 @@ import Editor from '@monaco-editor/react';
import { useQueryPageContext } from './Context';
import useMountedState from '@/hooks/useMountedState';
import { Box, Button, Text, px } from '@mantine/core';
-import { IconClipboard , IconSearch, IconCheck } from '@tabler/icons-react';
+import { IconClipboard, IconSearch, IconCheck } from '@tabler/icons-react';
import { notifications } from '@mantine/notifications';
import { useQueryResultEditorStyles } from './styles';
-
const QueryResultEditor: FC = () => {
- const { state: { result } } = useQueryPageContext();
- const [resultValue, setResultValue] = useMountedState(result.get());
- const editorRef = React.useRef();
- const monacoRef = React.useRef();
-
-
- useEffect(() => {
- const resultValueListener = result.subscribe(setResultValue);
-
- return () => {
- resultValueListener();
- }
+ const {
+ state: { result },
+ } = useQueryPageContext();
+ const [resultValue, setResultValue] = useMountedState(result.get());
+ const editorRef = React.useRef();
+ const monacoRef = React.useRef();
- }, [resultValue]);
+ useEffect(() => {
+ const resultValueListener = result.subscribe(setResultValue);
- const formatJSON = (jsonString: string) => {
- try {
- const jsonObject = JSON.parse(jsonString);
- return JSON.stringify(jsonObject, null, 2);
- } catch (e) {
- return jsonString;
- }
- }
- function handleEditorDidMount(editor: any, monaco: any) {
- editorRef.current = editor;
- monacoRef.current = monaco;
- }
+ return () => {
+ resultValueListener();
+ };
+ }, [resultValue]);
- const runFind = () => {
- editorRef.current?.getAction('actions.find').run();
- }
- const runCopy = () => {
- // Focus the editor.
- editorRef.current?.focus();
- // Get the current editor's content.
- const data = editorRef.current?.getModel()?.getValue();
- // Set the clipboard contents.
- navigator.clipboard.writeText(data || "");
+ const formatJSON = (jsonString: string) => {
+ try {
+ const jsonObject = JSON.parse(jsonString);
+ return JSON.stringify(jsonObject, null, 2);
+ } catch (e) {
+ return jsonString;
+ }
+ };
+ function handleEditorDidMount(editor: any, monaco: any) {
+ editorRef.current = editor;
+ monacoRef.current = monaco;
+ }
- notifications.show({
- color: 'green',
- icon:
-
- Result
-
-
-
-
-
-
- );
+ notifications.show({
+ color: 'green',
+ icon:
+
+ Result
+
+
+
+
+
+
+
+
+
+
+ );
};
-export default QueryResultEditor;
\ No newline at end of file
+export default QueryResultEditor;
diff --git a/src/pages/Query/QuerySchemaList.tsx b/src/pages/Query/QuerySchemaList.tsx
index 74ebdced..059be4db 100644
--- a/src/pages/Query/QuerySchemaList.tsx
+++ b/src/pages/Query/QuerySchemaList.tsx
@@ -2,14 +2,18 @@ import { FC, useEffect } from 'react';
import { useGetLogStreamSchema } from '@/hooks/useGetLogStreamSchema';
import { useHeaderContext } from '@/layouts/MainLayout/Context';
import { Table, Box, Title, Button, ScrollArea } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
-import { useQuerySchemaListStyles } from './styles';
+import { IconX } from '@tabler/icons-react';
+import { useQuerySchemaListStyles } from './styles';
import { useQueryPageContext } from './Context';
const QuerySchemaList: FC = () => {
const { data: querySchema, getDataSchema, resetData, loading, error: logStreamSchemaError } = useGetLogStreamSchema();
- const { state: { subLogQuery } } = useHeaderContext();
- const { state: { subSchemaToggle } } = useQueryPageContext();
+ const {
+ state: { subLogQuery },
+ } = useHeaderContext();
+ const {
+ state: { subSchemaToggle },
+ } = useQueryPageContext();
useEffect(() => {
if (subLogQuery.get().streamName) {
@@ -21,14 +25,14 @@ const QuerySchemaList: FC = () => {
}, [subLogQuery.get()]);
const renderList = querySchema?.fields.map((field, index) => {
- if(typeof field.data_type === "string")
- return (
-
- {field.name}
- {field.data_type}
-
- );
- else{
+ if (typeof field.data_type === 'string')
+ return (
+
+ {field.name}
+ {field.data_type}
+
+ );
+ else {
return (
{field.name}
@@ -38,29 +42,31 @@ const QuerySchemaList: FC = () => {
}
});
-const {classes} = useQuerySchemaListStyles();
- const {actionBtn ,container ,textContext ,theadSt ,tbodySt ,innercontainer,scrollAreaSt}=classes;
+ const { classes } = useQuerySchemaListStyles();
+ const { actionBtn, container, textContext, theadSt, tbodySt, innercontainer, scrollAreaSt } = classes;
return (
-
-
- Schema for {subLogQuery.get().streamName}
- subSchemaToggle.set((state)=>!state) }>
-
-
- {!(logStreamSchemaError) ? (
+
+
+ Schema for {subLogQuery.get().streamName}
+ subSchemaToggle.set((state) => !state)}>
+
+
+
+ {!logStreamSchemaError ? (
!loading && Boolean(querySchema) ? (
- (querySchema?.fields.length) ? (
-
-
-
-
- Feild
- Type
-
-
- {renderList}
-
+ querySchema?.fields.length ? (
+
+
+
+
+ Feild
+ Type
+
+
+ {renderList}
+
) : (
No Data
@@ -71,7 +77,6 @@ const {classes} = useQuerySchemaListStyles();
) : (
Error: {logStreamSchemaError}
)}
-
);
};
diff --git a/src/pages/Query/index.tsx b/src/pages/Query/index.tsx
index ec29c773..9adb1913 100644
--- a/src/pages/Query/index.tsx
+++ b/src/pages/Query/index.tsx
@@ -2,7 +2,7 @@ import { Box } from '@mantine/core';
import { useDocumentTitle } from '@mantine/hooks';
import { FC, useEffect } from 'react';
import { useQueryStyles } from './styles';
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import QueryCodeEditor from './QueryCodeEditor';
import QueryResultEditor from './QueryResultEditor';
import QuerySchemaList from './QuerySchemaList';
@@ -13,48 +13,50 @@ const Logs: FC = () => {
useDocumentTitle('Parseable | Query');
const { classes } = useQueryStyles();
- const { container,innerContainer,schemaContainer } = classes;
- const { state: { subSchemaToggle } } = useQueryPageContext();
+ const { container, innerContainer, schemaContainer } = classes;
+ const {
+ state: { subSchemaToggle },
+ } = useQueryPageContext();
const [isSchemaOpen, setIsSchemaOpen] = useMountedState(false);
useEffect(() => {
const listener = subSchemaToggle.subscribe(setIsSchemaOpen);
return () => {
- listener();
+ listener();
};
- }, [subSchemaToggle.get()]);
-
+ }, [subSchemaToggle.get()]);
return (
-
-
-
-
+
+
+
-
- …
-
-
-
-
-
+ …
+
+
+
+
+
-
-
+
-
);
};
diff --git a/src/pages/Query/styles.tsx b/src/pages/Query/styles.tsx
index f48c0b0c..0bf690f4 100644
--- a/src/pages/Query/styles.tsx
+++ b/src/pages/Query/styles.tsx
@@ -3,8 +3,8 @@ import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
import { createStyles } from '@mantine/core';
export const useQueryStyles = createStyles((theme) => {
- const { colors ,shadows } = theme;
- const { heights, widths, } = theme.other;
+ const { colors, shadows } = theme;
+ const { heights, widths } = theme.other;
const sColor = colors.brandSecondary[0];
const pColor = colors.brandPrimary[0];
@@ -26,9 +26,9 @@ export const useQueryStyles = createStyles((theme) => {
},
runQueryBtn: {
background: pColor,
- color: "white",
- height: "40px",
- marginRight: "5px",
+ color: 'white',
+ height: '40px',
+ marginRight: '5px',
'&:hover': {
background: sColor,
},
@@ -37,13 +37,14 @@ export const useQueryStyles = createStyles((theme) => {
'&:hover': {
color: sColor,
},
- height: "25px", marginRight: "5px"
+ height: '25px',
+ marginRight: '5px',
},
- schemaContainer:{
+ schemaContainer: {
border: `${widths.px} ${colors.gray[1]} solid`,
boxShadow: shadows.sm,
- maxWidth: "500px"
- }
+ maxWidth: '500px',
+ },
};
});
@@ -55,110 +56,104 @@ export const useQueryCodeEditorStyles = createStyles((theme) => {
return {
container: {
- display: "flex",
+ display: 'flex',
borderBottom: `solid 1px ${colors.gray[2]}`,
- alignItems: "center",
- height: "55px",
- padding: `${spacing.xs} ${spacing.md}` ,
- width:"100%"
+ alignItems: 'center',
+ height: '55px',
+ padding: `${spacing.xs} ${spacing.md}`,
+ width: '100%',
},
runQueryBtn: {
color: pColor,
borderColor: colors.gray[2],
- height: "34px",
- width: "34px",
- padding: "0px",
+ height: '34px',
+ width: '34px',
+ padding: '0px',
'&:hover': {
color: sColor,
},
marginInlineEnd: spacing.xs,
},
actionBtn: {
-
'&:hover': {
color: sColor,
},
- height: "34px",
- width: "34px",
- padding: "0px",
+ height: '34px',
+ width: '34px',
+ padding: '0px',
marginInlineEnd: spacing.xs,
color: colors.gray[5],
- borderColor:colors.gray[2]
+ borderColor: colors.gray[2],
},
textContext: {
marginRight: spacing.md,
fontSize: fontSizes.md,
fontFamily: fontFamily,
fontWeight: fontWeights.semibold,
- }
-
+ },
};
});
-
export const useQueryResultEditorStyles = createStyles((theme) => {
- const { colors, spacing ,fontFamily,fontSizes} = theme;
+ const { colors, spacing, fontFamily, fontSizes } = theme;
const { fontWeights } = theme.other;
const sColor = colors.brandSecondary[0];
-
return {
container: {
- display: "flex",
- alignItems: "center",
+ display: 'flex',
+ alignItems: 'center',
borderBottom: `solid 1px ${colors.gray[2]}`,
- height: "55px",
- padding: `${spacing.xs} ${spacing.md}` ,
+ height: '55px',
+ padding: `${spacing.xs} ${spacing.md}`,
},
actionBtn: {
-
'&:hover': {
color: sColor,
},
- height: "34px",
- width: "34px",
- padding: "0px",
+ height: '34px',
+ width: '34px',
+ padding: '0px',
marginInlineEnd: spacing.xs,
color: colors.gray[5],
- borderColor:colors.gray[2]
+ borderColor: colors.gray[2],
},
textContext: {
marginRight: spacing.md,
fontSize: fontSizes.md,
fontFamily: fontFamily,
fontWeight: fontWeights.semibold,
- }
+ },
};
});
-
export const useQuerySchemaListStyles = createStyles((theme) => {
- const { colors ,spacing ,fontFamily,fontSizes} = theme;
- const {fontWeights } = theme.other;
+ const { colors, spacing, fontFamily, fontSizes } = theme;
+ const { fontWeights } = theme.other;
const sColor = colors.brandSecondary[0];
return {
container: {
- maxWidth: "500px",
- height: "100%",
- overflow: "auto",
+ maxWidth: '500px',
+ height: '100%',
+ overflow: 'auto',
},
innercontainer: {
- display: "flex",
- alignItems: "center",
+ display: 'flex',
+ alignItems: 'center',
borderBottom: `solid 1px ${colors.gray[2]}`,
- height: "55px",
- padding: `${spacing.xs} ${spacing.md}` ,
- justifyContent:"space-between"
- ,paddingRight:0,
+ height: '55px',
+ padding: `${spacing.xs} ${spacing.md}`,
+ justifyContent: 'space-between',
+ paddingRight: 0,
},
actionBtn: {
color: colors.gray[3],
- height: "34px",
- width: "34px",
- padding: "0px",
- borderColor:colors.gray[2],
+ height: '34px',
+ width: '34px',
+ padding: '0px',
+ borderColor: colors.gray[2],
'&:hover': {
color: sColor,
},
@@ -169,29 +164,29 @@ export const useQuerySchemaListStyles = createStyles((theme) => {
fontFamily: fontFamily,
fontWeight: fontWeights.semibold,
},
- theadSt:{
- "& tr>th":{
- backgroundColor:colors.gray[0],
+ theadSt: {
+ '& tr>th': {
+ backgroundColor: colors.gray[0],
fontSize: fontSizes.md,
fontFamily: fontFamily,
fontWeight: fontWeights.semibold,
- color:colors.gray[3],
- height: "34px"
- }
+ color: colors.gray[3],
+ height: '34px',
+ },
},
- tbodySt:{
- "& tr>td":{
+ tbodySt: {
+ '& tr>td': {
fontSize: fontSizes.md,
fontFamily: fontFamily,
- borderTop:`solid 1px ${colors.gray[2]} !important`,
- color:colors.gray[6],
- height: "34px"
- }
- },
- scrollAreaSt:{
- maxWidth: "500px",
- height: "calc(100% - 55px)",
- overflow: "auto",
- }
+ borderTop: `solid 1px ${colors.gray[2]} !important`,
+ color: colors.gray[6],
+ height: '34px',
+ },
+ },
+ scrollAreaSt: {
+ maxWidth: '500px',
+ height: 'calc(100% - 55px)',
+ overflow: 'auto',
+ },
};
-});
\ No newline at end of file
+});
diff --git a/src/pages/Stats/Alerts.tsx b/src/pages/Stats/Alerts.tsx
new file mode 100644
index 00000000..886bf688
--- /dev/null
+++ b/src/pages/Stats/Alerts.tsx
@@ -0,0 +1,66 @@
+import { useGetLogStreamAlert } from '@/hooks/useGetLogStreamAlert';
+import { useGetLogStreamRetention } from '@/hooks/useGetLogStreamRetention';
+import { useGetLogStreamStat } from '@/hooks/useGetLogStreamStat';
+import { useHeaderContext } from '@/layouts/MainLayout/Context';
+import { Box, Text } from '@mantine/core';
+import { useDocumentTitle } from '@mantine/hooks';
+import { FC, useEffect } from 'react';
+import { useAlertsStyles } from './styles';
+
+const Alerts: FC = () => {
+ useDocumentTitle('Parseable | Login');
+ const {
+ state: { subLogQuery },
+ } = useHeaderContext();
+ const { data, error, loading, getLogAlert, resetData } = useGetLogStreamAlert();
+ const {
+ data: data2,
+ error: error2,
+ loading: loading2,
+ getLogRetention: getLogRetention,
+ resetData: resetData2,
+ } = useGetLogStreamRetention();
+ const {
+ data: data3,
+ error: error3,
+ loading: loading3,
+ getLogStat: getLogStat,
+ resetData: resetData3,
+ } = useGetLogStreamStat();
+ useEffect(() => {
+ getLogAlert(subLogQuery.get().streamName);
+ getLogRetention(subLogQuery.get().streamName);
+ getLogStat(subLogQuery.get().streamName);
+ return () => {
+ resetData();
+ resetData2();
+ resetData3();
+ };
+ }, [subLogQuery]);
+ const { classes } = useAlertsStyles();
+ const {
+ container,
+ headContainer,
+ statusText,
+ statusTextResult,
+ genterateContiner,
+ genterateText,
+ genterateTextResult,
+ } = classes;
+ return (
+
+
+
+ Status: {'- Receiving'}
+
+
+
+ Genterated at :
+ {'07/07/2023 - 18:01:59'}
+
+
+
+ );
+};
+
+export default Alerts;
diff --git a/src/pages/Stats/Status.tsx b/src/pages/Stats/Status.tsx
new file mode 100644
index 00000000..73732c9b
--- /dev/null
+++ b/src/pages/Stats/Status.tsx
@@ -0,0 +1,261 @@
+import { useGetLogStreamRetention } from '@/hooks/useGetLogStreamRetention';
+import { useGetLogStreamStat } from '@/hooks/useGetLogStreamStat';
+import { FIXED_DURATIONS, useHeaderContext } from '@/layouts/MainLayout/Context';
+import { useDocumentTitle } from '@mantine/hooks';
+import { FC, useEffect } from 'react';
+import { useStatCardStyles, useStatusStyles } from './styles';
+import { Box, Text, ThemeIcon, Tooltip, px } from '@mantine/core';
+import dayjs from 'dayjs';
+import { IconBrandDeezer, IconInfoCircle, IconTimelineEventText } from '@tabler/icons-react';
+import { useQueryResult } from '@/hooks/useQueryResult';
+import useMountedState from '@/hooks/useMountedState';
+function convert(val: number) {
+ // Thousands, millions, billions etc..
+ let s = ['', ' K', ' M', ' B', ' T'];
+
+ // Dividing the value by 3.
+ let sNum = Math.floor(('' + val).length / 3);
+
+ // Calculating the precised value.
+ let sVal = parseFloat((sNum != 0 ? val / Math.pow(1000, sNum) : val).toPrecision(4));
+
+ if (sVal % 1 != 0) {
+ return sVal.toFixed(1) + s[sNum];
+ }
+
+ // Appending the letter to precised val.
+ return sVal + s[sNum];
+}
+function formatBytes(a: any, b = 1) {
+ if (!+a) return '0 Bytes';
+ const c = 0 > b ? 0 : b,
+ d = Math.floor(Math.log(a) / Math.log(1024));
+ return `${parseFloat((a / Math.pow(1024, d)).toFixed(c))} ${['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'][d]
+ }`;
+}
+
+const Status: FC = () => {
+ useDocumentTitle('Parseable | Login');
+ const [statusFIXEDDURATIONS, setStatusFIXEDDURATIONS] = useMountedState(0);
+ const [status, setStatus] = useMountedState("Loading....");
+ FIXED_DURATIONS
+ const {
+ state: { subLogQuery },
+ } = useHeaderContext();
+ const {
+ data: dataRetention,
+ error: errorRetention,
+ loading: loadingRetention,
+ getLogRetention: getLogRetention,
+ resetData: resetDataRetention,
+ } = useGetLogStreamRetention();
+ const { data: queryResult, getQueryData, error: errorQueryResult, resetData: resetqueryResult } = useQueryResult();
+
+ const {
+ data: dataStat,
+ error: errorStat,
+ loading: loadingStat,
+ getLogStat,
+ resetData: resetStat,
+ } = useGetLogStreamStat();
+ useEffect(() => {
+ getLogRetention(subLogQuery.get().streamName);
+ getLogStat(subLogQuery.get().streamName);
+ getStatus();
+ return () => {
+ resetDataRetention();
+ resetStat();
+ };
+ }, []);
+
+ useEffect(() => {
+ const logQueryListener = subLogQuery.subscribe((query) => {
+ if (query.streamName) {
+ if (dataRetention) {
+ resetDataRetention();
+ resetStat();
+ resetqueryResult();
+ setStatusFIXEDDURATIONS(0);
+
+ }
+ getStatus();
+ getLogRetention(subLogQuery.get().streamName);
+ getLogStat(subLogQuery.get().streamName);
+ }
+ });
+
+ return () => {
+ logQueryListener();
+ };
+ }, [dataRetention]);
+
+ const getStatus = async () => {
+ const now = dayjs();
+ const LogQuery =
+ {
+ streamName: subLogQuery.get().streamName,
+ startTime: now.subtract(FIXED_DURATIONS[statusFIXEDDURATIONS].milliseconds, 'milliseconds').toDate(),
+ endTime: now.toDate()
+ }
+ getQueryData(LogQuery, `SELECT count(*) FROM ${subLogQuery.get().streamName} ;`);
+ }
+
+ useEffect(() => {
+ if (queryResult?.data[0] && queryResult?.data[0]["COUNT(UInt8(1))"]) {
+ setStatus(`${queryResult?.data[0]["COUNT(UInt8(1))"]} events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+ return;
+ }
+ if (errorQueryResult) {
+ setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS-1].name}`);
+ return;
+ }
+ if(queryResult?.data[0]["COUNT(UInt8(1))"]===0){
+ setStatus("Loading...");
+ if(FIXED_DURATIONS.length-1>statusFIXEDDURATIONS){
+ setStatusFIXEDDURATIONS(statusFIXEDDURATIONS+1);
+ getStatus();
+ return;
+ }
+ else{
+ setStatus(`Not Recieved any events in ${FIXED_DURATIONS[statusFIXEDDURATIONS].name}`);
+ }
+ }
+ }, [queryResult, errorQueryResult]);
+ const { classes } = useStatusStyles();
+ const {
+ container,
+ headContainer,
+ statusText,
+ statusTextResult,
+ genterateContiner,
+ genterateText,
+ genterateTextResult,
+ StatsContainer,
+ } = classes;
+ return (
+
+
+
+ Status: {status}
+
+
+
+ Genterated at :
+
+ {!loadingStat
+ ? errorStat
+ ? 'ERROR'
+ : dataStat
+ ? dayjs(dataStat?.time).format('DD-MM-YY HH:mm')
+ : 'Not found'
+ : 'Loading'}
+
+
+
+
+
+
+ );
+};
+
+type statCardProps = {
+ data: { Icon: any; title: string; description: string; value: string };
+};
+
+const StatCard: FC = (props) => {
+ const { data } = props;
+ const { classes } = useStatCardStyles();
+ const { statCard, statCardTitle, statCardDescription, statCardDescriptionIcon, statCardIcon, statCardTitleValue } =
+ classes;
+
+ return (
+
+
+
+
+
+
+
+ {data.value}
+ {data.title}
+
+ );
+};
+export default Status;
diff --git a/src/pages/Stats/index.tsx b/src/pages/Stats/index.tsx
new file mode 100644
index 00000000..8bb3daaf
--- /dev/null
+++ b/src/pages/Stats/index.tsx
@@ -0,0 +1,22 @@
+import { Box } from '@mantine/core';
+import { useDocumentTitle } from '@mantine/hooks';
+import { FC } from 'react';
+import Status from './Status';
+import Alerts from './Alerts';
+import { useStatsStyles } from './styles';
+
+const Stats: FC = () => {
+ useDocumentTitle('Parseable | Stats');
+
+ const { classes } = useStatsStyles();
+ const { container } = classes;
+ return (
+
+
+
+ );
+};
+
+export default Stats;
diff --git a/src/pages/Stats/styles.tsx b/src/pages/Stats/styles.tsx
new file mode 100644
index 00000000..5d6ddeb4
--- /dev/null
+++ b/src/pages/Stats/styles.tsx
@@ -0,0 +1,445 @@
+import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme';
+import { createStyles } from '@mantine/core';
+export const useStatsStyles = createStyles((theme) => {
+ const { widths } = theme.other;
+ return {
+ container: {
+ flex: 1,
+ width: `calc(${widths.full} - ${NAVBAR_WIDTH}px)`,
+ display: 'flex',
+ position: 'relative',
+ },
+ };
+});
+
+export const useStatusStyles = createStyles((theme) => {
+ const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+
+ const { fontWeights, widths, heights } = other;
+
+ const pColor = colors[primaryColor][2];
+
+ const defaultRadius = radius[theme.defaultRadius as string];
+
+ return {
+ container: {
+ position: 'relative',
+ flex: 1,
+ maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ },
+ headContainer: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding: spacing.md,
+ height: '55px',
+ alignItems: 'center',
+ borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+ },
+
+ statusText: {
+ fontSize: fontSizes.md,
+ fontWeight: fontWeights.semibold,
+ color: colors.gray[6],
+ },
+ statusTextResult: {
+ color: '#00CC14',
+ },
+ genterateContiner: {
+ marginRight: spacing.sm,
+ },
+ genterateText: {
+ fontSize: fontSizes.xs,
+ fontWeight: fontWeights.semibold,
+ color: colors.gray[6],
+ },
+ genterateTextResult: {
+ fontSize: fontSizes.xs,
+ color: colors.gray[6],
+ },
+ StatsContainer: {
+ display: 'flex',
+ flexDirection: 'row',
+ padding: spacing.md,
+ borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+ justifyContent: 'space-between',
+ },
+ };
+});
+export const useStatCardStyles = createStyles((theme) => {
+ const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+
+ const { fontWeights, widths, heights } = other;
+
+ const pColor = colors[primaryColor][0];
+
+ const defaultRadius = radius[theme.defaultRadius as string];
+
+ return {
+ statCard: {
+ border: `${widths.px} ${colors.gray[1]} solid`,
+ width: '18%',
+ borderRadius: defaultRadius,
+ textAlign: 'center',
+ },
+ statCardDescription: {
+ '& .mantine-Tooltip-tooltip': {
+ color: colors.white,
+ background: colors.black[0],
+ },
+ textAlign: 'right',
+ },
+ statCardDescriptionIcon: {
+ color: colors.gray[6],
+ margin: `${spacing.xs} ${spacing.xs} 0 0`,
+ },
+ statCardIcon: {
+ backgroundColor: '#e7eeff',
+ color: pColor,
+ marginTop: '-25px',
+ },
+ statCardTitleValue: {
+ fontSize: '30px',
+ fontWeight: fontWeights.bold,
+ color: pColor,
+ },
+ statCardTitle: {
+ fontSize: fontSizes.lg,
+ fontWeight: fontWeights.semibold,
+ color: colors.gray[6],
+ paddingBottom: spacing.md,
+ },
+ };
+});
+
+export const useAlertsStyles = createStyles((theme) => {
+ const { colors, other, spacing, radius, shadows, primaryColor, fontSizes } = theme;
+
+ const { fontWeights, widths, heights } = other;
+
+ const pColor = colors[primaryColor][2];
+
+ const defaultRadius = radius[theme.defaultRadius as string];
+
+ return {
+ container: {
+ position: 'relative',
+ flex: 1,
+ maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ },
+ headContainer: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ padding: spacing.md,
+ height: '55px',
+ alignItems: 'center',
+ borderBottom: `${widths.px} ${colors.gray[1]} solid`,
+ },
+
+ statusText: {
+ fontSize: fontSizes.md,
+ fontWeight: fontWeights.semibold,
+ color: colors.gray[6],
+ },
+ statusTextResult: {
+ color: '#00CC14',
+ },
+ genterateContiner: {
+ marginRight: spacing.sm,
+ },
+ genterateText: {
+ fontSize: fontSizes.xs,
+ fontWeight: fontWeights.semibold,
+ color: colors.gray[6],
+ },
+ genterateTextResult: {
+ fontSize: fontSizes.xs,
+ color: colors.gray[6],
+ },
+ };
+});
+
+export const useLogTableStyles = createStyles((theme) => {
+ const { spacing, other, radius, shadows, colors, fontSizes } = theme;
+ const { heights, widths, fontWeights } = other;
+ const pColor = colors.brandPrimary[0];
+ const sColor = colors.brandSecondary[0];
+
+ const defaultRadius = radius[theme.defaultRadius as string];
+
+ return {
+ container: {
+ position: 'relative',
+ flex: 1,
+ maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ // padding: px(spacing.sm),
+ },
+
+ innerContainer: {
+ position: 'relative',
+ flex: 1,
+ maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`,
+ display: 'flex',
+ flexDirection: 'column',
+ overflow: 'hidden',
+ },
+
+ paginationRow: {
+ '.mantine-Pagination-control': {
+ border: `solid 1px ${colors.gray[2]}`,
+ fontSize: fontSizes.sm,
+ '&:hover': {
+ color: sColor,
+ },
+ '&:data-active=true': {
+ color: pColor,
+ },
+ },
+ '.mantine-Pagination-control[data-active=true]': {
+ background: pColor,
+ '&:hover': {
+ backgroundColor: sColor,
+ color: colors.white[0],
+ },
+ },
+ },
+
+ tableContainer: {
+ position: 'relative',
+ },
+
+ tableStyle: {
+ whiteSpace: 'nowrap',
+ overflow: 'scroll',
+ width: '100%',
+ padding: 0,
+ },
+
+ theadStyle: {
+ position: 'sticky',
+ zIndex: 1,
+ top: 0,
+ '& th:last-of-type': {
+ position: 'sticky',
+ boxShadow: shadows.sm,
+ right: 0,
+ },
+ },
+
+ trStyle: {
+ cursor: 'pointer',
+ background: colors.white,
+ '&:hover': {
+ background: colors.gray[1],
+ },
+
+ '& td': {
+ height: heights[10],
+ textAlign: 'left',
+ verticalAlign: 'middle',
+ border: 'none !important',
+ },
+ },
+ trEvenStyle: {
+ cursor: 'pointer',
+ background: colors.gray[0],
+
+ '&:hover': {
+ background: colors.gray[1],
+ },
+
+ '& td': {
+ height: heights[10],
+ textAlign: 'left',
+ verticalAlign: 'middle',
+ border: 'none !important',
+ },
+ },
+
+ tdArrowContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+
+ tdArrow: {
+ position: 'sticky',
+ right: 0,
+ background: 'inherit',
+ boxShadow: shadows.sm,
+
+ 'tr:hover &': {
+ background: colors.gray[1],
+ },
+ },
+
+ thColumnMenuBtn: {
+ width: widths[10],
+ height: heights[10],
+ },
+
+ thColumnMenuDropdown: {
+ maxHeight: heights[96],
+ overflowX: 'hidden',
+ overflowY: 'scroll',
+ },
+
+ footerContainer: {
+ padding: spacing.md,
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ background: colors.gray[0],
+ borderTop: `${widths.px} ${colors.gray[1]} solid`,
+ },
+
+ errorContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ height: heights.full,
+ },
+
+ limitContainer: {},
+
+ limitBtn: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ cursor: 'pointer',
+ fontSize: fontSizes.sm,
+ background: colors.white[0],
+ padding: `0.2rem ${spacing.xs}`,
+ border: `${widths.px} ${colors.gray[1]} solid`,
+ borderRadius: defaultRadius,
+ '&:hover': {
+ background: colors.gray[1],
+ },
+ },
+
+ limitBtnText: {},
+
+ limitActive: {
+ background: pColor,
+ fontWeight: fontWeights.medium,
+ color: colors.white[0],
+
+ '&:hover': {
+ background: sColor,
+ },
+ },
+ limitOption: {
+ fontWeight: fontWeights.normal,
+
+ '&:hover': {
+ color: sColor,
+ },
+ },
+ };
+});
+
+export const useViewLogStyles = createStyles((theme) => {
+ const { spacing, other, colors, fontSizes } = theme;
+ const { fontWeights } = other;
+ const pColor = colors.brandPrimary[0];
+
+ return {
+ container: {
+ padding: spacing.lg,
+ },
+
+ headerContainer: {
+ background: pColor,
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ },
+
+ headerTimeStampTitle: {
+ color: colors.white,
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.semibold,
+ },
+
+ headerTimeStamp: {
+ color: colors.white,
+ fontSize: fontSizes.sm,
+ fontWeight: fontWeights.medium,
+ },
+
+ dataChipContainer: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ };
+});
+
+export const useTableColumnStyle = createStyles((theme) => {
+ const { spacing, colors, fontSizes, other, primaryColor } = theme;
+ const { fontWeights, widths } = other;
+
+ const pColor = colors[primaryColor];
+
+ return {
+ labelBtn: {
+ width: widths.full,
+ display: 'flex',
+ alignItems: 'center',
+ textAlign: 'left',
+ height: '100%',
+ '&:hover': {
+ background: colors.gray[1],
+ },
+ },
+
+ labelIcon: {
+ color: colors.gray[5],
+ marginLeft: spacing.xs,
+ },
+
+ labelIconActive: {
+ color: pColor[0],
+ },
+
+ searchInputStyle: {
+ marginBottom: spacing.xs,
+ },
+
+ checkBoxStyle: {
+ height: 35,
+ paddingTop: spacing.xs,
+ paddingBottom: spacing.xxs,
+ fontWeight: fontWeights.medium,
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+
+ '& .mantine-Checkbox-label': {
+ fontSize: fontSizes.sm,
+ },
+
+ '&:hover': {
+ background: colors.gray[1],
+ },
+ },
+
+ applyBtn: {
+ marginTop: spacing.xs,
+ width: widths.full,
+ background: pColor[0],
+
+ '&:hover': {
+ background: pColor[1],
+ },
+ },
+ };
+});
diff --git a/src/routes/elements.tsx b/src/routes/elements.tsx
index 11a6ef9a..c82f301a 100644
--- a/src/routes/elements.tsx
+++ b/src/routes/elements.tsx
@@ -43,13 +43,20 @@ export const QueryElement: FC = () => {
);
};
-
-
export const MainLayoutElement: FC = () => {
return (
+
+
+ );
+};
+
+const Stats = lazy(() => import('@/pages/Stats'));
-
-
+export const StatsElement: FC = () => {
+ return (
+
+
);
-}
+};
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 5d3d4fa5..1b27492e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,10 +1,10 @@
-import { ALL_ROUTE, HOME_ROUTE, LOGIN_ROUTE, LOGS_ROUTE, QUERY_ROUTE} from '@/constants/routes';
+import { ALL_ROUTE, HOME_ROUTE, LOGIN_ROUTE, LOGS_ROUTE, QUERY_ROUTE, STATS_ROUTE } from '@/constants/routes';
import FullPageLayout from '@/layouts/FullPageLayout';
import NotFound from '@/pages/Errors/NotFound';
import type { FC } from 'react';
import { Route, Routes } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
-import { HomeElement, LoginElement, LogsElement, QueryElement ,MainLayoutElement} from './elements';
+import { HomeElement, LoginElement, LogsElement, QueryElement, MainLayoutElement, StatsElement } from './elements';
const AppRouter: FC = () => {
return (
@@ -15,6 +15,7 @@ const AppRouter: FC = () => {