Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dashboard Page: Add saved filters SQL query to the editor #361

Merged
merged 4 commits into from
Nov 18, 2024
Merged

Dashboard Page: Add saved filters SQL query to the editor #361

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8b52b9a
Saved Filters on dashboard page
praveen5959 Nov 7, 2024
cefd979
Saved filter modal added
Nov 7, 2024
7bb6536
Clear appliedFilterQuery when stream changes
Nov 7, 2024
184bb62
Handle undefined case for appliedFilterQuery in setAppliedFilterQuery…
praveen5959 Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions src/pages/Dashboards/CreateTileForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import classes from './styles/Form.module.css';
import { useForm } from '@mantine/form';
import { useDashboardsStore, dashboardsStoreReducers } from './providers/DashboardsProvider';
import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
import { appStoreReducers, useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
import _ from 'lodash';
import { getLogStreamSchema } from '@/api/logStream';
import { Field } from '@/@types/parseable/dataType';
Expand All @@ -29,6 +29,7 @@ import TimeRange from '@/components/Header/TimeRange';
import { colors, isCircularChart, isGraph, normalizeGraphColorConfig } from './Charts';
import { usePostLLM } from '@/hooks/usePostLLM';
import { notify } from '@/utils/notification';
import { filterStoreReducers, useFilterStore } from '../Stream/providers/FilterProvider';

const selectDashboardWarningText = 'Select a dashboard to continue';
const validateQueryWarningText = 'Validate query to continue';
Expand All @@ -37,6 +38,8 @@ const noDataWarning = 'No data available for the query';
const invalidVizConfig = 'Invalid visualization config';

const { toggleVizEditorModal, toggleCreateTileModal } = dashboardsStoreReducers;
const { toggleSavedFiltersModal, setAppliedFilterQuery } = filterStoreReducers;
const { changeStream } = appStoreReducers;

const getErrorMsg = (form: TileFormType, configType: 'basic' | 'data' | 'viz'): string | null => {
const { dashboardId, isQueryValidated, data, visualization } = form.values;
Expand Down Expand Up @@ -289,14 +292,20 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
const [initialHeight, setInitialHeight] = useState(0);
const [dashboards] = useDashboardsStore((store) => store.dashboards);
const [timeRange] = useLogsStore((store) => store.timeRange);
const [appliedFilterQuery, setLogsStore] = useFilterStore((store) => store.appliedFilterQuery);
const [aiQuery, setAiQuery] = useState('');
const [userSpecificStreams] = useAppStore((store) => store.userSpecificStreams);
const [, setAppStore] = useAppStore((store) => store.maximized);
const allStreams = useMemo(
() => _.map(userSpecificStreams, (stream) => ({ label: stream.name, value: stream.name })),
[userSpecificStreams],
);
const { data: resAIQuery, postLLMQuery } = usePostLLM();

useEffect(() => {
onEditorChange(appliedFilterQuery);
}, [appliedFilterQuery]);

const onEditorChange = useCallback((query: string | undefined) => {
onChangeValue('query', query || '');
onChangeValue('isQueryValidated', false);
Expand Down Expand Up @@ -348,10 +357,15 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
});
}, [query, dashboardId, dashboards, timeRange]);

const onStreamSelect = useCallback((val: string | null) => {
setLocalStream(val || '');
const onStreamSelect = useCallback((stream: string | null) => {
if (stream) {
setAppStore((store) => changeStream(store, stream));
setLogsStore((store) => setAppliedFilterQuery(store, ''));
}
setLocalStream(stream || '');
}, []);

const onClick = useCallback(() => setLogsStore((store) => toggleSavedFiltersModal(store, true)), []);
const isValidStream = !_.isEmpty(localStream);
const handleAIGenerate = useCallback(() => {
if (!aiQuery?.length) {
Expand All @@ -375,6 +389,9 @@ const Query = (props: { form: TileFormType; onChangeValue: (key: string, value:
key="stream"
placeholder="Select Stream"
/>
<Button disabled={!localStream} className={classes.savedFiltersBtn} h="100%" onClick={onClick}>
Saved Filters
</Button>
</Stack>
</Stack>
{errorMsg && <Text className={classes.warningText}>{errorMsg}</Text>}
Expand Down
46 changes: 25 additions & 21 deletions src/pages/Dashboards/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { useSyncTimeRange } from './hooks';
import _ from 'lodash';
import useParamsController from './hooks/useParamsController';
import { useDocumentTitle } from '@mantine/hooks';
import SavedFiltersModal from '../Stream/components/Querier/SavedFiltersModal';

const LoadingView = () => {
return (
Expand All @@ -35,27 +36,30 @@ const Dashboards = () => {
}, [isStoreSynced]);

return (
<Box
style={{
flex: 1,
display: 'flex',
position: 'relative',
flexDirection: 'row',
width: '100%',
overflow: 'hidden',
}}>
{dashboards === null || !isStoreSynced ? (
<LoadingView />
) : createTileFormOpen ? (
<CreateTileForm />
) : (
<>
<SideBar updateTimeRange={updateTimeRange} />
<CreateDashboardModal />
<Dashboard />
</>
)}
</Box>
<>
<SavedFiltersModal />
<Box
style={{
flex: 1,
display: 'flex',
position: 'relative',
flexDirection: 'row',
width: '100%',
overflow: 'hidden',
}}>
{dashboards === null || !isStoreSynced ? (
<LoadingView />
) : createTileFormOpen ? (
<CreateTileForm />
) : (
<>
<SideBar updateTimeRange={updateTimeRange} />
<CreateDashboardModal />
<Dashboard />
</>
)}
</Box>
</>
);
};

Expand Down
34 changes: 22 additions & 12 deletions src/pages/Stream/components/Querier/SavedFiltersModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,10 @@ import { EmptySimple } from '@/components/Empty';
import { useAppStore } from '@/layouts/MainLayout/providers/AppProvider';
import useSavedFiltersQuery from '@/hooks/useSavedFilters';
import { generateQueryBuilderASTFromSQL } from '../../utils';
import { useLocation } from 'react-router-dom';

const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters } = filterStoreReducers;
const { toggleSavedFiltersModal, resetFilters, parseQuery, applySavedFilters, setAppliedFilterQuery } =
filterStoreReducers;
const { applyCustomQuery, updateSavedFilterId, getCleanStoreForRefetch, setTimeRange } = logsStoreReducers;

const renderDeleteIcon = () => <IconTrash size={px('1rem')} stroke={1.5} />;
Expand Down Expand Up @@ -58,6 +60,9 @@ const SavedFilterItem = (props: {
const [showDeletePropmt, setShowDeletePrompt] = useState<boolean>(false);
const { deleteSavedFilterMutation, isDeleting, isRefetching } = useSavedFiltersQuery();

const location = useLocation();
const [, setFilterStore] = useFilterStore((_store) => null);

const toggleShowQuery = useCallback(() => {
return setShowQuery((prev) => !prev);
}, []);
Expand All @@ -78,22 +83,27 @@ const SavedFilterItem = (props: {
}, [time_filter, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);

const onApplyFilters = useCallback(() => {
if (query.filter_query) {
if (query.filter_type === 'sql') {
props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
} else {
if (location.pathname.includes('dashboard')) {
setFilterStore((store) => setAppliedFilterQuery(store, query.filter_query));
setFilterStore((store) => toggleSavedFiltersModal(store, false));
} else {
if (query.filter_query) {
if (query.filter_type === 'sql') {
props.onSqlSearchApply(query.filter_query, filter_id, time_filter);
} else {
if (filter_id !== savedFilterId) {
props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
} else {
handleTimeFilter();
}
}
} else if (query.filter_builder) {
if (filter_id !== savedFilterId) {
props.onFilterBuilderQueryApply(generateQueryBuilderASTFromSQL(query.filter_query), filter_id);
props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
} else {
handleTimeFilter();
}
}
} else if (query.filter_builder) {
if (filter_id !== savedFilterId) {
props.onFilterBuilderQueryApply(query.filter_builder, filter_id);
} else {
handleTimeFilter();
}
}
}, [savedFilterId, isStoredAndCurrentTimeRangeAreSame, hardRefresh, changeTimerange]);

Expand Down
10 changes: 10 additions & 0 deletions src/pages/Stream/providers/FilterProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ type UpdateRuleType = {
type FilterStore = {
fields: Field[];
query: QueryType;
appliedFilterQuery: string;
fieldTypeMap: FieldTypeMap;
fieldNames: string[];
isSumbitDisabled: boolean;
Expand All @@ -88,6 +89,7 @@ const defaultQuery = {
const initialState: FilterStore = {
fields: [],
query: defaultQuery,
appliedFilterQuery: '',
fieldTypeMap: {},
fieldNames: [],
isSumbitDisabled: true,
Expand Down Expand Up @@ -139,6 +141,7 @@ type FilterStoreReducers = {
toggleSaveFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
toggleSavedFiltersModal: (_store: FilterStore, val: boolean) => ReducerOutput;
applySavedFilters: (store: FilterStore, query: QueryType) => ReducerOutput;
setAppliedFilterQuery: (store: FilterStore, query: string | undefined) => ReducerOutput;
};

const { Provider: FilterProvider, useStore: useFilterStore } = initContext(initialState);
Expand Down Expand Up @@ -234,6 +237,12 @@ const updateParentCombinator = (store: FilterStore, combinator: Combinator) => {
return { query: { ...query, combinator: combinator } };
};

const setAppliedFilterQuery = (_store: FilterStore, query: string | undefined) => {
praveen5959 marked this conversation as resolved.
Show resolved Hide resolved
return {
appliedFilterQuery: query,
praveen5959 marked this conversation as resolved.
Show resolved Hide resolved
};
};

export const noValueOperators = ['null', 'notNull'];

const toggleSubmitBtn = (_store: FilterStore, val: boolean) => {
Expand Down Expand Up @@ -354,6 +363,7 @@ const filterStoreReducers: FilterStoreReducers = {
toggleSaveFiltersModal,
toggleSavedFiltersModal,
applySavedFilters,
setAppliedFilterQuery,
};

export { FilterProvider, useFilterStore, filterStoreReducers };
4 changes: 3 additions & 1 deletion src/routes/elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,9 @@ export const DashboardsElement: FC = () => {
<SuspensePage>
<LogsProvider>
<DashbaordsProvider>
<Dashboards />
<FilterProvider>
<Dashboards />
</FilterProvider>
</DashbaordsProvider>
</LogsProvider>
</SuspensePage>
Expand Down
Loading