Skip to content

Commit

Permalink
Extract useFilterManager and useTimefilter
Browse files Browse the repository at this point in the history
  • Loading branch information
Liza K committed Feb 4, 2020
1 parent 35f7a91 commit 3e6af5e
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 54 deletions.
65 changes: 11 additions & 54 deletions src/plugins/data/public/ui/search_bar/create_search_bar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@

import React, { useState, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { Subscription } from 'rxjs';
import { CoreStart } from 'src/core/public';
import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
import { KibanaContextProvider } from '../../../../kibana_react/public';
import { DataPublicPluginStart, esFilters, Query, TimeRange, SavedQuery } from '../..';
import { QueryStart } from '../../query';
import { SearchBarOwnProps, SearchBar } from './search_bar';
import { useFilterManager } from './lib/use_filter_manager';
import { useTimefilter } from './lib/use_timefilter';

interface StatefulSearchBarDeps {
core: CoreStart;
Expand Down Expand Up @@ -186,10 +187,11 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
return (props: StatefulSearchBarProps) => {
const { appName, savedQueryId, onQuerySubmit } = props;
const { filterManager, timefilter, savedQueries } = data.query;
const tfRefreshInterval = timefilter.timefilter.getRefreshInterval();
const [refreshInterval, setRefreshInterval] = useState(tfRefreshInterval.value);
const [refreshPaused, setRefreshPaused] = useState(tfRefreshInterval.pause);
const [timeRange, setTimerange] = useState(timefilter.timefilter.getTime());

// handle service state updates.
// i.e. filters being added from a visualization directly to filterManager.
const { filters } = useFilterManager({ filterManager });
const { timeRange, refreshInterval } = useTimefilter({ timefilter: timefilter.timefilter });

// Handle queries
const [query, setQuery] = useState<Query>(
Expand All @@ -201,7 +203,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)

// Fire onQuerySubmit on query or timerange change
useEffect(() => {
if (props.useDefaultBehaviors && onQuerySubmit)
if (!props.useDefaultBehaviors) return;
if (onQuerySubmit)
onQuerySubmit(
{
dateRange: timeRange,
Expand Down Expand Up @@ -240,52 +243,6 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
fetchSavedQuery();
}, [savedQueryId, savedQueries]);

// timerange
useEffect(() => {
const subscriptions = new Subscription();

subscriptions.add(
timefilter.timefilter.getRefreshIntervalUpdate$().subscribe({
next: () => {
const newRefreshInterval = timefilter.timefilter.getRefreshInterval();
setRefreshInterval(newRefreshInterval.value);
setRefreshPaused(newRefreshInterval.pause);
},
})
);

subscriptions.add(
timefilter.timefilter.getTimeUpdate$().subscribe({
next: () => {
setTimerange(timefilter.timefilter.getTime());
},
})
);

return () => {
subscriptions.unsubscribe();
};
}, [timefilter.timefilter]);

// filters
const [filters, setFilters] = useState(filterManager.getFilters());
useEffect(() => {
const subscriptions = new Subscription();

subscriptions.add(
filterManager.getUpdates$().subscribe({
next: () => {
const newFilters = filterManager.getFilters();
setFilters(newFilters);
},
})
);

return () => {
subscriptions.unsubscribe();
};
}, [filterManager]);

return (
<KibanaContextProvider
services={{
Expand All @@ -307,8 +264,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
timeHistory={timefilter.history}
dateRangeFrom={timeRange.from}
dateRangeTo={timeRange.to}
refreshInterval={refreshInterval}
isRefreshPaused={refreshPaused}
refreshInterval={refreshInterval.value}
isRefreshPaused={refreshInterval.pause}
filters={filters}
query={query}
onFiltersUpdated={defaultFiltersUpdated(data.query)}
Expand Down
48 changes: 48 additions & 0 deletions src/plugins/data/public/ui/search_bar/lib/use_filter_manager.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { useState, useEffect } from 'react';
import { Subscription } from 'rxjs';
import { DataPublicPluginStart } from 'src/plugins/data/public';

interface UseFilterManagerProps {
filterManager: DataPublicPluginStart['query']['filterManager'];
}

export const useFilterManager = (props: UseFilterManagerProps) => {
const [filters, setFilters] = useState(props.filterManager.getFilters());
useEffect(() => {
const subscriptions = new Subscription();

subscriptions.add(
props.filterManager.getUpdates$().subscribe({
next: () => {
const newFilters = props.filterManager.getFilters();
setFilters(newFilters);
},
})
);

return () => {
subscriptions.unsubscribe();
};
}, [props.filterManager]);

return { filters };
};
61 changes: 61 additions & 0 deletions src/plugins/data/public/ui/search_bar/lib/use_timefilter.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { useState, useEffect } from 'react';
import { Subscription } from 'rxjs';
import { DataPublicPluginStart } from 'src/plugins/data/public';

interface UseTimefilterProps {
timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
}

export const useTimefilter = (props: UseTimefilterProps) => {
const [timeRange, setTimerange] = useState(props.timefilter.getTime());
const [refreshInterval, setRefreshInterval] = useState(props.timefilter.getRefreshInterval());

useEffect(() => {
const subscriptions = new Subscription();

subscriptions.add(
props.timefilter.getRefreshIntervalUpdate$().subscribe({
next: () => {
const newRefreshInterval = props.timefilter.getRefreshInterval();
setRefreshInterval(newRefreshInterval);
},
})
);

subscriptions.add(
props.timefilter.getTimeUpdate$().subscribe({
next: () => {
setTimerange(props.timefilter.getTime());
},
})
);

return () => {
subscriptions.unsubscribe();
};
}, [props.timefilter]);

return {
refreshInterval,
timeRange,
};
};

0 comments on commit 3e6af5e

Please sign in to comment.