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

Explore: Automatically infer props from mapStateToProps (#35932)

Browse Source 
* Explore: refactor ExploreQueryInspector.tsx to inferr props via mapStateToProps

* Explore: refactor ExploreToolbar.tsx to infere props from mapStateToProps
This commit is contained in:
Olof Bourghardt 2021-06-22 08:24:19 +02:00 committed by GitHub
parent f84a74018c
commit cd1c7530a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/features/explore/ExploreQueryInspector.tsx
View File

@ -1,10 +1,10 @@
import React from 'react';
import { TabbedContainer, TabConfig } from '@grafana/ui';
import { PanelData, TimeZone } from '@grafana/data';
import { TimeZone } from '@grafana/data';
import { runQueries } from './state/query';
import { StoreState, ExploreItemState, ExploreId } from 'app/types';
import { hot } from 'react-hot-loader';
import { connect } from 'react-redux';
import { connect, ConnectedProps } from 'react-redux';
import { ExploreDrawer } from 'app/features/explore/ExploreDrawer';
import { InspectJSONTab } from 'app/features/inspector/InspectJSONTab';
import { QueryInspector } from 'app/features/inspector/QueryInspector';
@ -13,16 +13,13 @@ import { InspectDataTab } from 'app/features/inspector/InspectDataTab';
import { InspectErrorTab } from 'app/features/inspector/InspectErrorTab';
interface DispatchProps {
runQueries: typeof runQueries;
}
interface Props extends DispatchProps {
loading: boolean;
width: number;
exploreId: ExploreId;
queryResponse?: PanelData;
onClose: () => void;
}
type Props = DispatchProps & ConnectedProps<typeof connector>;
export function ExploreQueryInspector(props: Props) {
const { loading, width, onClose, queryResponse } = props;
const dataFrames = queryResponse?.series || [];
@ -90,8 +87,10 @@ function mapStateToProps(state: StoreState, { exploreId }: { exploreId: ExploreI
};
}
const mapDispatchToProps: DispatchProps = {
const mapDispatchToProps = {
runQueries,
};
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(ExploreQueryInspector));
const connector = connect(mapStateToProps, mapDispatchToProps);
export default hot(module)(connector(ExploreQueryInspector));

43
public/app/features/explore/ExploreToolbar.tsx
View File

@ -1,12 +1,12 @@
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { connect, ConnectedProps } from 'react-redux';
import { hot } from 'react-hot-loader';
import classNames from 'classnames';
import { css } from '@emotion/css';
import { ExploreId, ExploreItemState } from 'app/types/explore';
import { Icon, IconButton, SetInterval, ToolbarButton, ToolbarButtonRow, Tooltip } from '@grafana/ui';
import { DataSourceInstanceSettings, RawTimeRange, TimeRange, TimeZone } from '@grafana/data';
import { DataSourceInstanceSettings, RawTimeRange } from '@grafana/data';
import { DataSourcePicker } from '@grafana/runtime';
import { StoreState } from 'app/types/store';
import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@ -28,36 +28,7 @@ interface OwnProps {
onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void;
}
interface StateProps {
datasourceMissing: boolean;
loading: boolean;
range: TimeRange;
timeZone: TimeZone;
splitted: boolean;
syncedTimes: boolean;
refreshInterval?: string;
hasLiveOption: boolean;
isLive: boolean;
isPaused: boolean;
datasourceLoading?: boolean | null;
containerWidth: number;
datasourceName?: string;
}
interface DispatchProps {
changeDatasource: typeof changeDatasource;
clearAll: typeof clearQueries;
cancelQueries: typeof cancelQueries;
runQueries: typeof runQueries;
closeSplit: typeof splitClose;
split: typeof splitOpen;
syncTimes: typeof syncTimes;
changeRefreshInterval: typeof changeRefreshInterval;
onChangeTimeZone: typeof updateTimeZoneForSession;
clearCache: typeof clearCache;
}
type Props = StateProps & DispatchProps & OwnProps;
type Props = OwnProps & ConnectedProps<typeof connector>;
export class UnConnectedExploreToolbar extends PureComponent<Props> {
onChangeDatasource = async (dsSettings: DataSourceInstanceSettings) => {
@ -236,7 +207,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
}
}
const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps => {
const mapStateToProps = (state: StoreState, { exploreId }: OwnProps) => {
const syncedTimes = state.explore.syncedTimes;
const exploreItem: ExploreItemState = state.explore[exploreId]!;
const {
@ -268,7 +239,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
};
};
const mapDispatchToProps: DispatchProps = {
const mapDispatchToProps = {
changeDatasource,
changeRefreshInterval,
clearAll: clearQueries,
@ -281,4 +252,6 @@ const mapDispatchToProps: DispatchProps = {
clearCache,
};
export const ExploreToolbar = hot(module)(connect(mapStateToProps, mapDispatchToProps)(UnConnectedExploreToolbar));
const connector = connect(mapStateToProps, mapDispatchToProps);
export const ExploreToolbar = hot(module)(connector(UnConnectedExploreToolbar));