diff --git a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx index 72f1ae34214..5e7c4d7016a 100644 --- a/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx +++ b/packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx @@ -8,10 +8,7 @@ import memoizeOne from 'memoize-one'; import { GrafanaTheme } from '../../types'; import { withTheme } from '../../themes'; -export const offOption = { label: 'Off', value: '' }; -export const liveOption = { label: 'Live', value: 'LIVE' }; -export const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d']; -export const isLive = (refreshInterval: string): boolean => refreshInterval === liveOption.value; +const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d']; const getStyles = memoizeOne((theme: GrafanaTheme) => { return { @@ -38,10 +35,9 @@ export interface Props { } export class RefreshPickerBase extends PureComponent { - // Make it exported as static properties to be easier to access. The global exports need to be accessed by direct - // import of this source file which won't work if this was installed as package. - static offOption = offOption; - static liveOption = liveOption; + static offOption = { label: 'Off', value: '' }; + static liveOption = { label: 'Live', value: 'LIVE' }; + static isLive = (refreshInterval: string): boolean => refreshInterval === RefreshPicker.liveOption.value; constructor(props: Props) { super(props); @@ -54,10 +50,10 @@ export class RefreshPickerBase extends PureComponent { .map(interval => ({ label: interval, value: interval })); if (this.props.hasLiveOption) { - options.unshift(liveOption); + options.unshift(RefreshPicker.liveOption); } - options.unshift(offOption); + options.unshift(RefreshPicker.offOption); return options; }; @@ -73,13 +69,13 @@ export class RefreshPickerBase extends PureComponent { const { onRefresh, intervals, tooltip, value, refreshButton, buttonSelectClassName, theme } = this.props; const options = this.intervalsToOptions(intervals); const currentValue = value || ''; - const selectedValue = options.find(item => item.value === currentValue) || offOption; + const selectedValue = options.find(item => item.value === currentValue) || RefreshPicker.offOption; const styles = getStyles(theme); const cssClasses = classNames({ 'refresh-picker': true, - 'refresh-picker--off': selectedValue.label === offOption.label, - 'refresh-picker--live': selectedValue === liveOption, + 'refresh-picker--off': selectedValue.label === RefreshPicker.offOption.label, + 'refresh-picker--live': selectedValue === RefreshPicker.liveOption, }); return ( @@ -116,5 +112,6 @@ export const RefreshPicker = withTheme< { offOption: typeof RefreshPickerBase.offOption; liveOption: typeof RefreshPickerBase.liveOption; + isLive: typeof RefreshPickerBase.isLive; } >(RefreshPickerBase); diff --git a/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx b/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx index d239130c96d..8ec4b35d4dd 100644 --- a/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx +++ b/packages/grafana-ui/src/components/SetInterval/SetInterval.tsx @@ -4,7 +4,7 @@ import { tap, switchMap } from 'rxjs/operators'; import _ from 'lodash'; import { stringToMs, SelectableValue } from '@grafana/data'; -import { isLive } from '../RefreshPicker/RefreshPicker'; +import { RefreshPicker } from '../RefreshPicker/RefreshPicker'; export function getIntervalFromString(strInterval: string): SelectableValue { return { @@ -39,7 +39,7 @@ export class SetInterval extends PureComponent { switchMap(props => { // If the query is live, empty value is emited. `of` creates single value, // which is merged to propsSubject stream - if (isLive(props.interval)) { + if (RefreshPicker.isLive(props.interval)) { return of({}); } @@ -61,7 +61,10 @@ export class SetInterval extends PureComponent { } componentDidUpdate(prevProps: Props) { - if ((isLive(prevProps.interval) && isLive(this.props.interval)) || _.isEqual(prevProps, this.props)) { + if ( + (RefreshPicker.isLive(prevProps.interval) && RefreshPicker.isLive(this.props.interval)) || + _.isEqual(prevProps, this.props) + ) { return; } // if props changed, a new value is emited from propsSubject diff --git a/public/app/core/utils/explore.test.ts b/public/app/core/utils/explore.test.ts index 0f21634675d..336335fd8a3 100644 --- a/public/app/core/utils/explore.test.ts +++ b/public/app/core/utils/explore.test.ts @@ -16,8 +16,7 @@ import { import { ExploreUrlState, ExploreMode } from 'app/types/explore'; import store from 'app/core/store'; import { LogsDedupStrategy, LogsModel, LogLevel, dateTime } from '@grafana/data'; -import { DataQueryError } from '@grafana/ui'; -import { liveOption, offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker'; +import { DataQueryError, RefreshPicker } from '@grafana/ui'; const DEFAULT_EXPLORE_STATE: ExploreUrlState = { datasource: null, @@ -341,7 +340,7 @@ describe('getRefIds', () => { describe('refreshIntervalToSortOrder', () => { describe('when called with live option', () => { it('then it should return ascending', () => { - const result = refreshIntervalToSortOrder(liveOption.value); + const result = refreshIntervalToSortOrder(RefreshPicker.liveOption.value); expect(result).toBe(SortOrder.Ascending); }); @@ -349,7 +348,7 @@ describe('refreshIntervalToSortOrder', () => { describe('when called with off option', () => { it('then it should return descending', () => { - const result = refreshIntervalToSortOrder(offOption.value); + const result = refreshIntervalToSortOrder(RefreshPicker.offOption.value); expect(result).toBe(SortOrder.Descending); }); diff --git a/public/app/core/utils/explore.ts b/public/app/core/utils/explore.ts index 38252c7d0e6..493372f1bca 100644 --- a/public/app/core/utils/explore.ts +++ b/public/app/core/utils/explore.ts @@ -1,7 +1,6 @@ // Libraries import _ from 'lodash'; import { Unsubscribable } from 'rxjs'; -import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker'; // Services & Utils import { dateMath, @@ -21,7 +20,7 @@ import store from 'app/core/store'; import kbn from 'app/core/utils/kbn'; import { getNextRefIdChar } from './query'; // Types -import { DataQuery, DataSourceApi, DataQueryError, DataQueryRequest, PanelModel } from '@grafana/ui'; +import { DataQuery, DataSourceApi, DataQueryError, DataQueryRequest, PanelModel, RefreshPicker } from '@grafana/ui'; import { ExploreUrlState, HistoryItem, QueryTransaction, QueryOptions, ExploreMode } from 'app/types/explore'; import { config } from '../config'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; @@ -488,7 +487,7 @@ export enum SortOrder { } export const refreshIntervalToSortOrder = (refreshInterval: string) => - isLive(refreshInterval) ? SortOrder.Ascending : SortOrder.Descending; + RefreshPicker.isLive(refreshInterval) ? SortOrder.Ascending : SortOrder.Descending; export const sortLogsResult = (logsResult: LogsModel, sortOrder: SortOrder): LogsModel => { const rows = logsResult ? logsResult.rows : []; diff --git a/public/app/features/explore/state/actions.ts b/public/app/features/explore/state/actions.ts index a6397473f7c..ca56b43a215 100644 --- a/public/app/features/explore/state/actions.ts +++ b/public/app/features/explore/state/actions.ts @@ -22,7 +22,7 @@ import { } from 'app/core/utils/explore'; // Types import { ThunkResult, ExploreUrlState, ExploreItemState } from 'app/types'; -import { DataSourceApi, DataQuery, DataSourceSelectItem, QueryFixAction, PanelData } from '@grafana/ui'; +import { DataSourceApi, DataQuery, DataSourceSelectItem, QueryFixAction, PanelData, RefreshPicker } from '@grafana/ui'; import { RawTimeRange, @@ -74,7 +74,6 @@ import { } from './actionTypes'; import { ActionOf, ActionCreator } from 'app/core/redux/actionCreatorFactory'; import { getTimeZone } from 'app/features/profile/state/selectors'; -import { offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker'; import { getShiftedTimeRange } from 'app/core/utils/timePicker'; import { updateLocation } from '../../../core/actions'; import { getTimeSrv } from '../../dashboard/services/TimeSrv'; @@ -124,7 +123,7 @@ export function changeDatasource(exploreId: ExploreId, datasource: string): Thun await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance)); if (getState().explore[exploreId].isLive) { - dispatch(changeRefreshInterval(exploreId, offOption.value)); + dispatch(changeRefreshInterval(exploreId, RefreshPicker.offOption.value)); } await dispatch(loadDatasource(exploreId, newDataSourceInstance, orgId)); diff --git a/public/app/features/explore/state/reducers.ts b/public/app/features/explore/state/reducers.ts index 03a7a1a0bb6..f19760a53d5 100644 --- a/public/app/features/explore/state/reducers.ts +++ b/public/app/features/explore/state/reducers.ts @@ -11,7 +11,7 @@ import { } from 'app/core/utils/explore'; import { ExploreItemState, ExploreState, ExploreId, ExploreUpdateState, ExploreMode } from 'app/types/explore'; import { LoadingState, toLegacyResponseData, DefaultTimeRange } from '@grafana/data'; -import { DataQuery, DataSourceApi, PanelData, DataQueryRequest } from '@grafana/ui'; +import { DataQuery, DataSourceApi, PanelData, DataQueryRequest, RefreshPicker } from '@grafana/ui'; import { HigherOrderAction, ActionTypes, @@ -59,7 +59,6 @@ import { reducerFactory, ActionOf } from 'app/core/redux'; import { updateLocation } from 'app/core/actions/location'; import { LocationUpdate } from '@grafana/runtime'; import TableModel from 'app/core/table_model'; -import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker'; import { ResultProcessor } from '../utils/ResultProcessor'; export const DEFAULT_RANGE = { @@ -191,11 +190,11 @@ export const itemReducer = reducerFactory({} as ExploreItemSta filter: changeRefreshIntervalAction, mapper: (state, action): ExploreItemState => { const { refreshInterval } = action.payload; - const live = isLive(refreshInterval); + const live = RefreshPicker.isLive(refreshInterval); const sortOrder = refreshIntervalToSortOrder(refreshInterval); const logsResult = sortLogsResult(state.logsResult, sortOrder); - if (isLive(state.refreshInterval) && !live) { + if (RefreshPicker.isLive(state.refreshInterval) && !live) { stopQueryState(state.querySubscription); }