IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: RefreshPicker export things as statics on class (#19443)

Browse Source
This commit is contained in:
Andrej Ocenas 2019-09-27 10:15:05 +02:00 committed by GitHub
parent 8024c39435
commit 234a2c599d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 26 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.tsx
View File

@ -8,10 +8,7 @@ import memoizeOne from 'memoize-one';
import { GrafanaTheme } from '../../types'; import { GrafanaTheme } from '../../types';
import { withTheme } from '../../themes'; import { withTheme } from '../../themes';
export const offOption = { label: 'Off', value: '' }; const defaultIntervals = ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d'];
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 getStyles = memoizeOne((theme: GrafanaTheme) => { const getStyles = memoizeOne((theme: GrafanaTheme) => {
return { return {
@ -38,10 +35,9 @@ export interface Props {
} }
export class RefreshPickerBase extends PureComponent<Props> { export class RefreshPickerBase extends PureComponent<Props> {
// Make it exported as static properties to be easier to access. The global exports need to be accessed by direct static offOption = { label: 'Off', value: '' };
// import of this source file which won't work if this was installed as package. static liveOption = { label: 'Live', value: 'LIVE' };
static offOption = offOption; static isLive = (refreshInterval: string): boolean => refreshInterval === RefreshPicker.liveOption.value;
static liveOption = liveOption;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -54,10 +50,10 @@ export class RefreshPickerBase extends PureComponent<Props> {
.map(interval => ({ label: interval, value: interval })); .map(interval => ({ label: interval, value: interval }));
if (this.props.hasLiveOption) { if (this.props.hasLiveOption) {
options.unshift(liveOption); options.unshift(RefreshPicker.liveOption);
} }
options.unshift(offOption); options.unshift(RefreshPicker.offOption);
return options; return options;
}; };
@ -73,13 +69,13 @@ export class RefreshPickerBase extends PureComponent<Props> {
const { onRefresh, intervals, tooltip, value, refreshButton, buttonSelectClassName, theme } = this.props; const { onRefresh, intervals, tooltip, value, refreshButton, buttonSelectClassName, theme } = this.props;
const options = this.intervalsToOptions(intervals); const options = this.intervalsToOptions(intervals);
const currentValue = value || ''; 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 styles = getStyles(theme);
const cssClasses = classNames({ const cssClasses = classNames({
'refresh-picker': true, 'refresh-picker': true,
'refresh-picker--off': selectedValue.label === offOption.label, 'refresh-picker--off': selectedValue.label === RefreshPicker.offOption.label,
'refresh-picker--live': selectedValue === liveOption, 'refresh-picker--live': selectedValue === RefreshPicker.liveOption,
}); });
return ( return (
@ -116,5 +112,6 @@ export const RefreshPicker = withTheme<
{ {
offOption: typeof RefreshPickerBase.offOption; offOption: typeof RefreshPickerBase.offOption;
liveOption: typeof RefreshPickerBase.liveOption; liveOption: typeof RefreshPickerBase.liveOption;
isLive: typeof RefreshPickerBase.isLive;
} }
>(RefreshPickerBase); >(RefreshPickerBase);

9
packages/grafana-ui/src/components/SetInterval/SetInterval.tsx
View File

@ -4,7 +4,7 @@ import { tap, switchMap } from 'rxjs/operators';
import _ from 'lodash'; import _ from 'lodash';
import { stringToMs, SelectableValue } from '@grafana/data'; import { stringToMs, SelectableValue } from '@grafana/data';
import { isLive } from '../RefreshPicker/RefreshPicker'; import { RefreshPicker } from '../RefreshPicker/RefreshPicker';
export function getIntervalFromString(strInterval: string): SelectableValue<number> { export function getIntervalFromString(strInterval: string): SelectableValue<number> {
return { return {
@ -39,7 +39,7 @@ export class SetInterval extends PureComponent<Props> {
switchMap(props => { switchMap(props => {
// If the query is live, empty value is emited. `of` creates single value, // If the query is live, empty value is emited. `of` creates single value,
// which is merged to propsSubject stream // which is merged to propsSubject stream
if (isLive(props.interval)) { if (RefreshPicker.isLive(props.interval)) {
return of({}); return of({});
} }
@ -61,7 +61,10 @@ export class SetInterval extends PureComponent<Props> {
} }
componentDidUpdate(prevProps: Props) { 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; return;
} }
// if props changed, a new value is emited from propsSubject // if props changed, a new value is emited from propsSubject

7
public/app/core/utils/explore.test.ts
View File

@ -16,8 +16,7 @@ import {
import { ExploreUrlState, ExploreMode } from 'app/types/explore'; import { ExploreUrlState, ExploreMode } from 'app/types/explore';
import store from 'app/core/store'; import store from 'app/core/store';
import { LogsDedupStrategy, LogsModel, LogLevel, dateTime } from '@grafana/data'; import { LogsDedupStrategy, LogsModel, LogLevel, dateTime } from '@grafana/data';
import { DataQueryError } from '@grafana/ui'; import { DataQueryError, RefreshPicker } from '@grafana/ui';
import { liveOption, offOption } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
const DEFAULT_EXPLORE_STATE: ExploreUrlState = { const DEFAULT_EXPLORE_STATE: ExploreUrlState = {
datasource: null, datasource: null,
@ -341,7 +340,7 @@ describe('getRefIds', () => {
describe('refreshIntervalToSortOrder', () => { describe('refreshIntervalToSortOrder', () => {
describe('when called with live option', () => { describe('when called with live option', () => {
it('then it should return ascending', () => { it('then it should return ascending', () => {
const result = refreshIntervalToSortOrder(liveOption.value); const result = refreshIntervalToSortOrder(RefreshPicker.liveOption.value);
expect(result).toBe(SortOrder.Ascending); expect(result).toBe(SortOrder.Ascending);
}); });
@ -349,7 +348,7 @@ describe('refreshIntervalToSortOrder', () => {
describe('when called with off option', () => { describe('when called with off option', () => {
it('then it should return descending', () => { it('then it should return descending', () => {
const result = refreshIntervalToSortOrder(offOption.value); const result = refreshIntervalToSortOrder(RefreshPicker.offOption.value);
expect(result).toBe(SortOrder.Descending); expect(result).toBe(SortOrder.Descending);
}); });

5
public/app/core/utils/explore.ts
View File

@ -1,7 +1,6 @@
// Libraries // Libraries
import _ from 'lodash'; import _ from 'lodash';
import { Unsubscribable } from 'rxjs'; import { Unsubscribable } from 'rxjs';
import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
// Services & Utils // Services & Utils
import { import {
dateMath, dateMath,
@ -21,7 +20,7 @@ import store from 'app/core/store';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import { getNextRefIdChar } from './query'; import { getNextRefIdChar } from './query';
// Types // 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 { ExploreUrlState, HistoryItem, QueryTransaction, QueryOptions, ExploreMode } from 'app/types/explore';
import { config } from '../config'; import { config } from '../config';
import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv';
@ -488,7 +487,7 @@ export enum SortOrder {
} }
export const refreshIntervalToSortOrder = (refreshInterval: string) => 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 => { export const sortLogsResult = (logsResult: LogsModel, sortOrder: SortOrder): LogsModel => {
const rows = logsResult ? logsResult.rows : []; const rows = logsResult ? logsResult.rows : [];

5
public/app/features/explore/state/actions.ts
View File

@ -22,7 +22,7 @@ import {
} from 'app/core/utils/explore'; } from 'app/core/utils/explore';
// Types // Types
import { ThunkResult, ExploreUrlState, ExploreItemState } from 'app/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 { import {
RawTimeRange, RawTimeRange,
@ -74,7 +74,6 @@ import {
} from './actionTypes'; } from './actionTypes';
import { ActionOf, ActionCreator } from 'app/core/redux/actionCreatorFactory'; import { ActionOf, ActionCreator } from 'app/core/redux/actionCreatorFactory';
import { getTimeZone } from 'app/features/profile/state/selectors'; 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 { getShiftedTimeRange } from 'app/core/utils/timePicker';
import { updateLocation } from '../../../core/actions'; import { updateLocation } from '../../../core/actions';
import { getTimeSrv } from '../../dashboard/services/TimeSrv'; 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)); await dispatch(importQueries(exploreId, queries, currentDataSourceInstance, newDataSourceInstance));
if (getState().explore[exploreId].isLive) { if (getState().explore[exploreId].isLive) {
dispatch(changeRefreshInterval(exploreId, offOption.value)); dispatch(changeRefreshInterval(exploreId, RefreshPicker.offOption.value));
} }
await dispatch(loadDatasource(exploreId, newDataSourceInstance, orgId)); await dispatch(loadDatasource(exploreId, newDataSourceInstance, orgId));

7
public/app/features/explore/state/reducers.ts
View File

@ -11,7 +11,7 @@ import {
} from 'app/core/utils/explore'; } from 'app/core/utils/explore';
import { ExploreItemState, ExploreState, ExploreId, ExploreUpdateState, ExploreMode } from 'app/types/explore'; import { ExploreItemState, ExploreState, ExploreId, ExploreUpdateState, ExploreMode } from 'app/types/explore';
import { LoadingState, toLegacyResponseData, DefaultTimeRange } from '@grafana/data'; 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 { import {
HigherOrderAction, HigherOrderAction,
ActionTypes, ActionTypes,
@ -59,7 +59,6 @@ import { reducerFactory, ActionOf } from 'app/core/redux';
import { updateLocation } from 'app/core/actions/location'; import { updateLocation } from 'app/core/actions/location';
import { LocationUpdate } from '@grafana/runtime'; import { LocationUpdate } from '@grafana/runtime';
import TableModel from 'app/core/table_model'; import TableModel from 'app/core/table_model';
import { isLive } from '@grafana/ui/src/components/RefreshPicker/RefreshPicker';
import { ResultProcessor } from '../utils/ResultProcessor'; import { ResultProcessor } from '../utils/ResultProcessor';
export const DEFAULT_RANGE = { export const DEFAULT_RANGE = {
@ -191,11 +190,11 @@ export const itemReducer = reducerFactory<ExploreItemState>({} as ExploreItemSta
filter: changeRefreshIntervalAction, filter: changeRefreshIntervalAction,
mapper: (state, action): ExploreItemState => { mapper: (state, action): ExploreItemState => {
const { refreshInterval } = action.payload; const { refreshInterval } = action.payload;
const live = isLive(refreshInterval); const live = RefreshPicker.isLive(refreshInterval);
const sortOrder = refreshIntervalToSortOrder(refreshInterval); const sortOrder = refreshIntervalToSortOrder(refreshInterval);
const logsResult = sortLogsResult(state.logsResult, sortOrder); const logsResult = sortLogsResult(state.logsResult, sortOrder);
if (isLive(state.refreshInterval) && !live) { if (RefreshPicker.isLive(state.refreshInterval) && !live) {
stopQueryState(state.querySubscription); stopQueryState(state.querySubscription);
} }