diff --git a/src/api/query.ts b/src/api/query.ts index 8cffee00..87e573c8 100644 --- a/src/api/query.ts +++ b/src/api/query.ts @@ -5,7 +5,7 @@ import { LogsQuery } from '@/@types/parseable/api/query'; export const getQueryLogs = (logsQuery: LogsQuery) => { const { startTime, endTime, streamName } = logsQuery; - const query = `SELECT * FROM ${streamName} ORDER BY p_timestamp DESC`; + const query = `SELECT * FROM ${streamName} ORDER BY p_timestamp DESC Limit 6000`; return Axios().post( LOG_QUERY_URL, diff --git a/src/components/Header/SubHeader.tsx b/src/components/Header/SubHeader.tsx index 8512a1ed..4c9b34d9 100644 --- a/src/components/Header/SubHeader.tsx +++ b/src/components/Header/SubHeader.tsx @@ -8,7 +8,7 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'; import { Fragment, useEffect, useMemo } from 'react'; import { FIXED_DURATIONS, REFRESH_INTERVALS, useHeaderContext } from '@/layouts/MainLayout/Context'; import { useLogQueryStyles } from './styles'; - +import { useMatch } from 'react-router-dom'; const SubHeader: FC = () => { const { classes } = useLogQueryStyles(); const { container, innerContainer, homeIcon, activeBtn } = classes; @@ -22,7 +22,6 @@ const SubHeader: FC = () => { const listener = subLogQuery.subscribe((state) => { setStreamName(state.streamName); }); - return () => listener(); }, []); @@ -31,19 +30,20 @@ const SubHeader: FC = () => { - + Streams {streamName} - Logs + {useMatch("/:streamName/logs")? "Logs": "Query" } - - - + {useMatch("/:streamName/logs") + && + + } diff --git a/src/pages/Query/Context.tsx b/src/pages/Query/Context.tsx index fd548433..58370b5e 100644 --- a/src/pages/Query/Context.tsx +++ b/src/pages/Query/Context.tsx @@ -1,57 +1,17 @@ import useSubscribeState, { SubData } from '@/hooks/useSubscribeState'; -import type { LogsQuery } from '@/@types/parseable/api/query'; + import type { FC } from 'react'; import { ReactNode, createContext, useContext } from 'react'; -import dayjs from 'dayjs'; const Context = createContext({}); const { Provider } = Context; -const now = dayjs(); - -export const LOG_QUERY_LIMITS = [30, 50, 100, 150, 200]; -export const REFRESH_INTERVALS = [1000, 2000, 5000, 10000, 20000, 60000]; -export const FIXED_DURATIONS = [ - { - name: 'Past 10 Minutes', - milliseconds: dayjs.duration({ minutes: 10 }).asMilliseconds(), - }, - { - name: 'Past 1 Hour', - milliseconds: dayjs.duration({ hours: 1 }).asMilliseconds(), - }, - { - name: 'Past 5 Hours', - milliseconds: dayjs.duration({ hours: 5 }).asMilliseconds(), - }, - { - name: 'Past 24 Hours', - milliseconds: dayjs.duration({ days: 1 }).asMilliseconds(), - }, - { - name: 'Past 3 Days', - milliseconds: dayjs.duration({ days: 3 }).asMilliseconds(), - }, - { - name: 'Past 7 Days', - milliseconds: dayjs.duration({ days: 7 }).asMilliseconds(), - }, - { - name: 'Past 2 Months', - milliseconds: dayjs.duration({ months: 2 }).asMilliseconds(), - }, -] as const; - -export const DEFAULT_FIXED_DURATIONS = FIXED_DURATIONS[0]; export const defaultQueryResult = "" interface QueryPageContextState { result: SubData; - subLogQuery: SubData; - subRefreshInterval: SubData; - subLogSelectedTimeRange: SubData; } // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -68,19 +28,9 @@ interface QueryPageProviderProps { const QueryPageProvider: FC = ({ children }) => { const result = useSubscribeState(defaultQueryResult); - const subLogQuery = useSubscribeState({ - startTime: now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate(), - endTime: now.toDate(), - streamName: '', - }); - const subRefreshInterval = useSubscribeState(null); - const subLogSelectedTimeRange = useSubscribeState(DEFAULT_FIXED_DURATIONS.name); const state: QueryPageContextState = { result, - subLogQuery, - subRefreshInterval, - subLogSelectedTimeRange, }; const methods: QueryPageContextMethods = {}; diff --git a/src/pages/Query/LogQuery.tsx b/src/pages/Query/LogQuery.tsx deleted file mode 100644 index e6e1b19d..00000000 --- a/src/pages/Query/LogQuery.tsx +++ /dev/null @@ -1,250 +0,0 @@ -import useMountedState from '@/hooks/useMountedState'; -import { Box, Breadcrumbs, Button, Menu, Text, UnstyledButton, px } from '@mantine/core'; -import { DateTimePicker } from '@mantine/dates'; -import { IconClock, IconRefresh, IconRefreshOff } from '@tabler/icons-react'; -import dayjs from 'dayjs'; -import ms from 'ms'; -import type { FC } from 'react'; -import { Fragment, useEffect, useMemo } from 'react'; -import { FIXED_DURATIONS, REFRESH_INTERVALS, useQueryPageContext } from './Context'; -import { useLogQueryStyles } from './styles'; - -const LogQuery: FC = () => { - const { classes } = useLogQueryStyles(); - const { container, innerContainer } = classes; - const { - state: { subLogQuery }, - } = useQueryPageContext(); - - return ( - - - - - - {/* Home > Streams > Stream-name > logs */} - Home - Streams - {subLogQuery.get().streamName} - Query - - - - - - - - - - - ); -}; - - - - -const RefreshInterval: FC = () => { - const { - state: { subRefreshInterval }, - } = useQueryPageContext(); - - const [selectedInterval, setSelectedInterval] = useMountedState(subRefreshInterval.get()); - - useEffect(() => { - const listener = subRefreshInterval.subscribe((interval) => { - setSelectedInterval(interval); - }); - - return () => listener(); - }, []); - - const Icon = useMemo(() => (selectedInterval ? IconRefresh : IconRefreshOff), [selectedInterval]); - - const onSelectedInterval = (interval: number | null) => { - subRefreshInterval.set(interval); - }; - - const { classes } = useLogQueryStyles(); - const { intervalBtn } = classes; - - return ( - - - - - - {REFRESH_INTERVALS.map((interval) => { - if (interval === selectedInterval) return null; - - return ( - onSelectedInterval(interval)}> - {ms(interval)} - - ); - })} - - {selectedInterval !== null && ( - onSelectedInterval(null)}> - Off - - )} - - - ); -}; - -type FixedDurations = (typeof FIXED_DURATIONS)[number]; - -const TimeRange: FC = () => { - const { - state: { subLogQuery, subLogSelectedTimeRange }, - } = useQueryPageContext(); - - const [selectedRange, setSelectedRange] = useMountedState(subLogSelectedTimeRange.get()); - - useEffect(() => { - const listener = subLogSelectedTimeRange.subscribe((state) => { - setSelectedRange(state); - }); - - return () => listener(); - }, []); - - const onDurationSelect = (duration: FixedDurations) => { - subLogSelectedTimeRange.set(duration.name); - const now = dayjs(); - - subLogQuery.set((query) => { - query.startTime = now.subtract(duration.milliseconds, 'milliseconds').toDate(); - query.endTime = now.toDate(); - }); - }; - - const { classes, cx } = useLogQueryStyles(); - const { - timeRangeBTn, - timeRangeContainer, - fixedRangeContainer, - fixedRangeBtn, - fixedRangeBtnSelected, - customRangeContainer, - } = classes; - - return ( - - - - - - - - {FIXED_DURATIONS.map((duration) => { - return ( - onDurationSelect(duration)}> - {duration.name} - - ); - })} - - - - - - - - ); -}; - -const CustomTimeRange: FC = () => { - const { - state: { subLogQuery, subLogSelectedTimeRange }, - } = useQueryPageContext(); - - const [selectedRange, setSelectedRange] = useMountedState({ - startTime: subLogQuery.get().startTime, - endTime: subLogQuery.get().endTime, - }); - - const onRangeSelect = (key: keyof typeof selectedRange, date: Date) => { - setSelectedRange((state) => { - state[key] = date; - return { ...state }; - }); - }; - - const onApply = () => { - subLogQuery.set((query) => { - query.startTime = selectedRange.startTime; - query.endTime = selectedRange.endTime; - }); - const startTime = dayjs(selectedRange.startTime).format('DD-MM-YY HH:mm'); - const endTime = dayjs(selectedRange.endTime).format('DD-MM-YY HH:mm'); - subLogSelectedTimeRange.set(`${startTime} - ${endTime}`); - }; - - const { classes } = useLogQueryStyles(); - const { customTimeRangeFooter, customTimeRangeApplyBtn } = classes; - - const isApplicable = useMemo(() => { - return ( - dayjs(selectedRange.startTime).isSame(subLogQuery.get().startTime, 'seconds') && - dayjs(selectedRange.endTime).isSame(subLogQuery.get().endTime, 'seconds') - ); - }, [selectedRange]); - - const isStartTimeMoreThenEndTime = useMemo(() => { - return dayjs(selectedRange.startTime).isAfter(selectedRange.endTime, 'seconds'); - }, [selectedRange]); - - return ( - - { - if (date) { - onRangeSelect('startTime', date); - } - }} - valueFormat="DD-MM-YY HH:mm" - label="From" - placeholder="Pick date and time" - /> - { - if (date) { - onRangeSelect('endTime', date); - } - }} - valueFormat="DD-MM-YY HH:mm" - label="To" - placeholder="Pick date and time" - mt="md" - /> - - - - - ); -}; - -export default LogQuery; diff --git a/src/pages/Query/QueryCodeEditor.tsx b/src/pages/Query/QueryCodeEditor.tsx index bb412b78..4cf620c9 100644 --- a/src/pages/Query/QueryCodeEditor.tsx +++ b/src/pages/Query/QueryCodeEditor.tsx @@ -1,20 +1,23 @@ import React ,{ FC, useEffect } from 'react'; import Editor from '@monaco-editor/react'; import { useQueryPageContext } from './Context'; -import { Box, Button } from '@mantine/core'; +import { useHeaderContext } from '@/layouts/MainLayout/Context'; +import { Box, Button ,Text } from '@mantine/core'; import { useQueryResult } from '@/hooks/useQueryResult'; import { ErrorMarker, errChecker } from "./ErrorMarker"; import { notifications } from '@mantine/notifications'; -import { IconCheck, IconFileAlert } from '@tabler/icons-react'; -import { useQueryStyles } from './styles'; +import { IconPlayerPlayFilled, IconCheck, IconFileAlert } from '@tabler/icons-react'; +import { useQueryCodeEditorStyles } from './styles'; + const QueryCodeEditor: FC = () => { - const { state: {result, subLogQuery } } = useQueryPageContext(); + const { state: {subLogQuery } } = useHeaderContext(); + const { state: {result } } = useQueryPageContext(); + const { data: queryResult, getQueryData , error,resetData } = useQueryResult(); const editorRef = React.useRef(); const monacoRef = React.useRef(); - const { classes } = useQueryStyles(); - const { runQueryBtn } = classes; + const [query, setQuery] = React.useState(`SELECT * FROM ${subLogQuery.get().streamName} LIMIT 100`); const handleEditorChange = (code: any) => { @@ -81,10 +84,20 @@ const QueryCodeEditor: FC = () => { }, [queryResult , error]); + const { classes } = useQueryCodeEditorStyles(); + const { container,runQueryBtn,textContext } = classes; + return ( - + + + Query + + + + + { glyphMargin: true, }} /> - + ); }; diff --git a/src/pages/Query/QueryResultEditor.tsx b/src/pages/Query/QueryResultEditor.tsx index b379b567..5bed4bc7 100644 --- a/src/pages/Query/QueryResultEditor.tsx +++ b/src/pages/Query/QueryResultEditor.tsx @@ -2,10 +2,10 @@ import React, { FC, useEffect } from 'react'; import Editor from '@monaco-editor/react'; import { useQueryPageContext } from './Context'; import useMountedState from '@/hooks/useMountedState'; -import { Box, Button ,px} from '@mantine/core'; +import { Box, Button, Text, px } from '@mantine/core'; import { IconCopy, IconSearch, IconCheck } from '@tabler/icons-react'; import { notifications } from '@mantine/notifications'; -import { useQueryStyles } from './styles'; +import { useQueryResultEditorStyles } from './styles'; const QueryResultEditor: FC = () => { @@ -13,8 +13,7 @@ const QueryResultEditor: FC = () => { const [resultValue, setResultValue] = useMountedState(result.get()); const editorRef = React.useRef(); const monacoRef = React.useRef(); - const { classes } = useQueryStyles(); - const { actionBtn } = classes; + useEffect(() => { const resultValueListener = result.subscribe(setResultValue); @@ -56,14 +55,21 @@ const QueryResultEditor: FC = () => { autoClose: 1000, }) } - + const { classes } = useQueryResultEditorStyles(); + const { actionBtn, container, textContext } = classes; return ( - - - - + + Result + + + + + + + { wordBasedSuggestions: true, }} /> + ); }; diff --git a/src/pages/Query/QuerySchemaList.tsx b/src/pages/Query/QuerySchemaList.tsx index 1d120750..058df05c 100644 --- a/src/pages/Query/QuerySchemaList.tsx +++ b/src/pages/Query/QuerySchemaList.tsx @@ -1,13 +1,13 @@ import { FC, useEffect } from 'react'; import { useGetLogStreamSchema } from '@/hooks/useGetLogStreamSchema'; -import { useQueryPageContext } from './Context'; +import { useHeaderContext } from '@/layouts/MainLayout/Context'; import { Table, Box, Title } from '@mantine/core'; const QuerySchemaList: FC = () => { const { data: querySchema, getDataSchema, resetData, loading, error: logStreamSchemaError } = useGetLogStreamSchema(); - const { state: { subLogQuery } } = useQueryPageContext(); + const { state: { subLogQuery } } = useHeaderContext(); useEffect(() => { if (subLogQuery.get().streamName) { @@ -43,7 +43,7 @@ const QuerySchemaList: FC = () => { {!(logStreamSchemaError) ? ( !loading && Boolean(querySchema) ? ( - (querySchema.fields.length) ? ( + (querySchema?.fields.length) ? ( diff --git a/src/pages/Query/index.tsx b/src/pages/Query/index.tsx index d7ca06d0..a92436d6 100644 --- a/src/pages/Query/index.tsx +++ b/src/pages/Query/index.tsx @@ -5,53 +5,20 @@ import { useQueryStyles } from './styles'; import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels"; import QueryCodeEditor from './QueryCodeEditor'; import QueryResultEditor from './QueryResultEditor'; -import { useParams } from "react-router-dom"; -import QuerySchemaList from './QuerySchemaList'; -import { useQueryPageContext, DEFAULT_FIXED_DURATIONS } from './Context'; -import dayjs from 'dayjs'; -import LogQuery from './LogQuery'; +// import QuerySchemaList from './QuerySchemaList'; + const Logs: FC = () => { useDocumentTitle('Parseable | Query'); - const { state: { subLogQuery } } = useQueryPageContext(); - const { streamName } = useParams(); + const { classes } = useQueryStyles(); const { container,innerContainer1 } = classes; - if (subLogQuery.get().streamName !== streamName) { - const now = dayjs(); - - subLogQuery.set((state) => { - state.streamName = streamName || ''; - state.startTime = now.subtract(DEFAULT_FIXED_DURATIONS.milliseconds, 'milliseconds').toDate(); - state.endTime = now.toDate(); - }); - - } return ( - - - - - - - - ⋮ - - - - + { … - + - - diff --git a/src/pages/Query/styles.tsx b/src/pages/Query/styles.tsx index efc9d38e..90dc5202 100644 --- a/src/pages/Query/styles.tsx +++ b/src/pages/Query/styles.tsx @@ -1,13 +1,12 @@ -import { HEADER_HEIGHT ,NAVBAR_WIDTH} from '@/constants/theme'; +import { HEADER_HEIGHT, NAVBAR_WIDTH } from '@/constants/theme'; import { createStyles } from '@mantine/core'; export const useQueryStyles = createStyles((theme) => { - const { colors ,spacing,fontSizes,radius } = theme; - const { heights,widths,fontWeights ,sizing} = theme.other; + const { colors, spacing } = theme; + const { heights, widths, } = theme.other; const sColor = colors.brandSecondary[0]; - const pColor =colors.brandPrimary[0]; - const defaultRadius = radius[theme.defaultRadius as string]; + const pColor = colors.brandPrimary[0]; return { container: { @@ -16,7 +15,7 @@ export const useQueryStyles = createStyles((theme) => { display: 'flex', position: 'relative', }, - innerContainer1:{ + innerContainer1: { position: 'relative', flex: 1, maxHeight: `calc(${heights.screen} - ${HEADER_HEIGHT}px)`, @@ -26,15 +25,15 @@ export const useQueryStyles = createStyles((theme) => { // padding: px(spacing.sm), }, runQueryBtn: { - background: pColor, - color: "white", - height: "40px", + background: pColor, + color: "white", + height: "40px", marginRight: "5px", '&:hover': { background: sColor, }, }, - actionBtn:{ + actionBtn: { '&:hover': { color: sColor, }, @@ -45,256 +44,72 @@ export const useQueryStyles = createStyles((theme) => { paddingTop: spacing.xxs, marginRight: spacing.md, }, - intervalBtn: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - background: pColor, - color: colors.white[0], - paddingLeft: spacing.xs, - paddingRight: spacing.xs, - minWidth: widths[20], - border: `${sizing.px} ${colors.gray[2]} solid`, - borderLeft: 'none', - - '&:hover': { - background: sColor, - }, - }, - timeRangeBTn: { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - color: colors.black[0], - border: `${sizing.px} ${colors.gray[2]} solid`, - minWidth: widths[20], - background: colors.gray[0], - fontWeight: fontWeights.medium, - fontSize: fontSizes.xs, - - '&:hover': { - background: colors.gray[1], - }, - }, - timeRangeContainer: { - display: 'flex', - }, - fixedRangeContainer: { - display: 'flex', - flexDirection: 'column', - background: colors.gray[0], - }, - - fixedRangeBtn: { - color: colors.black, - padding: spacing.sm, - fontSize: fontSizes.sm, - - '&:hover': { - background: colors.gray[1], - }, - - '&:first-of-type': { - borderTopLeftRadius: defaultRadius, - }, - - '&:last-of-type': { - borderBottomLeftRadius: defaultRadius, - }, - }, - - fixedRangeBtnSelected: { - background: pColor, - fontWeight: fontWeights.semibold, - color: colors.white[0], - - '&:hover': { - background: sColor, - }, - }, - - customRangeContainer: { - padding: `${spacing.xs} ${spacing.lg}`, - minWidth: widths[80], - flex: 1, - display: 'flex', - flexDirection: 'column', - justifyContent: 'stretch', - }, - - customTimeRangeFooter: { - display: 'flex', - marginTop: 'auto', - justifyContent: 'end', - alignItems: 'center', - }, - - customTimeRangeApplyBtn: { - background: pColor, - '&:hover': { - background: sColor, - }, - }, }; }); - -export const useLogQueryStyles = createStyles((theme) => { - const { spacing, radius, colors, fontSizes } = theme; - const { sizing, widths, fontWeights } = theme.other; - const defaultRadius = radius[theme.defaultRadius as string]; - const pColor = colors.brandPrimary[0]; +export const useQueryCodeEditorStyles = createStyles((theme) => { + const { colors, spacing, fontFamily, fontSizes } = theme; + const { fontWeights } = theme.other; const sColor = colors.brandSecondary[0]; + const pColor = colors.brandPrimary[0]; + return { container: { - display: 'flex', - padding: spacing.xs, - // boxShadow: shadows.sm, - // marginBottom: spacing.md, - // borderRadius: defaultRadius, - borderBottom: `${sizing.px} ${colors.gray[2]} solid`, - justifyContent: 'space-between', - alignItems: 'center', - - }, - innerContainer: { - display: 'flex', - paddingTop: spacing.xxs, - marginRight: spacing.md, - }, - - intervalBtn: { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - background: pColor, - color: colors.white[0], - paddingLeft: spacing.xs, - paddingRight: spacing.xs, - minWidth: widths[20], - border: `${sizing.px} ${colors.gray[2]} solid`, - borderLeft: 'none', - - '&:hover': { - background: sColor, - }, - }, - - timeRangeBTn: { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - color: colors.black[0], - border: `${sizing.px} ${colors.gray[2]} solid`, - minWidth: widths[20], - background: colors.gray[0], - fontWeight: fontWeights.medium, - fontSize: fontSizes.xs, - - '&:hover': { - background: colors.gray[1], - }, - }, - - timeRangeContainer: { - display: 'flex', - }, - - fixedRangeContainer: { - display: 'flex', - flexDirection: 'column', - background: colors.gray[0], - }, - - fixedRangeBtn: { - color: colors.black, - padding: spacing.sm, - fontSize: fontSizes.sm, - - '&:hover': { - background: colors.gray[1], - }, - - '&:first-of-type': { - borderTopLeftRadius: defaultRadius, - }, - - '&:last-of-type': { - borderBottomLeftRadius: defaultRadius, - }, + display: "flex", + borderBottom: `solid 1px ${colors.gray[2]}`, + alignItems: "center", + height: "55px", + padding: `${spacing.xs} ${spacing.md}` , }, - - fixedRangeBtnSelected: { - background: pColor, - fontWeight: fontWeights.semibold, - color: colors.white[0], - + runQueryBtn: { + color: pColor, + border: "none", + height: "40px", + marginLeft: "auto", '&:hover': { - background: sColor, + color: sColor, }, }, + textContext: { + marginRight: spacing.md, + fontSize: fontSizes.md, + fontFamily: fontFamily, + fontWeight: fontWeights.bold, + } - customRangeContainer: { - padding: `${spacing.xs} ${spacing.lg}`, - minWidth: widths[80], - flex: 1, - display: 'flex', - flexDirection: 'column', - justifyContent: 'stretch', - }, - - customTimeRangeFooter: { - display: 'flex', - marginTop: 'auto', - justifyContent: 'end', - alignItems: 'center', - }, - - customTimeRangeApplyBtn: { - background: pColor, - '&:hover': { - background: sColor, - }, - }, + }; +}); - searchContainer: { - display: 'flex', - }, - searchTypeBtn: { - border: `${sizing.px} ${colors.gray[2]} solid`, - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - background: pColor, - color: colors.white[0], - borderRight: 'none', - fontWeight: fontWeights.semibold, - paddingRight: spacing.sm, - '&:hover': { - background: pColor, - }, - }, +export const useQueryResultEditorStyles = createStyles((theme) => { + const { colors, spacing ,fontFamily,fontSizes} = theme; + const { fontWeights } = theme.other; + const sColor = colors.brandSecondary[0]; - searchTypeActive: { - background: pColor, - fontWeight: fontWeights.medium, - color: colors.white[0], + return { + container: { + display: "flex", + alignItems: "center", + borderBottom: `solid 1px ${colors.gray[2]}`, + height: "55px", + padding: `${spacing.xs} ${spacing.md}` , + }, + actionBtn: { + '&:hover': { - background: sColor, - }, - }, - - searchInput: { - width: '100%', - flex: 1, - - '& input': { - background: colors.gray[0], - border: `${sizing.px} ${colors.gray[2]} solid`, + color: sColor, }, + height: "34px", + marginInlineEnd: spacing.xs, + color: colors.gray[5], + borderColor:colors.gray[5] }, + textContext: { + marginRight: spacing.md, + fontSize: fontSizes.md, + fontFamily: fontFamily, + fontWeight: fontWeights.bold, + } }; }); \ No newline at end of file