import omitBy from 'lodash/omitBy'; import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; import memoizeOne from 'memoize-one'; import classNames from 'classnames'; import { css } from 'emotion'; import { ExploreId, ExploreItemState, ExploreMode } from 'app/types/explore'; import { ToggleButtonGroup, ToggleButton, Tooltip, ButtonSelect, SetInterval } from '@grafana/ui'; import { RawTimeRange, TimeZone, TimeRange, DataSourceSelectItem, DataQuery } from '@grafana/data'; import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; import { StoreState } from 'app/types/store'; import { changeDatasource, clearQueries, splitClose, runQueries, splitOpen, syncTimes, changeRefreshInterval, changeMode, clearOrigin, } from './state/actions'; import { updateLocation } from 'app/core/actions'; import { getTimeZone } from '../profile/state/selectors'; import { getDashboardSrv } from '../dashboard/services/DashboardSrv'; import kbn from '../../core/utils/kbn'; import { ExploreTimeControls } from './ExploreTimeControls'; import { LiveTailButton } from './LiveTailButton'; import { ResponsiveButton } from './ResponsiveButton'; import { RunButton } from './RunButton'; import { LiveTailControls } from './useLiveTailControls'; const getStyles = memoizeOne(() => { return { liveTailButtons: css` margin-left: 10px; @media (max-width: 1110px) { margin-left: 4px; } `, }; }); interface OwnProps { exploreId: ExploreId; onChangeTime: (range: RawTimeRange, changedByScanner?: boolean) => void; } interface StateProps { datasourceMissing: boolean; exploreDatasources: DataSourceSelectItem[]; loading: boolean; range: TimeRange; timeZone: TimeZone; selectedDatasource: DataSourceSelectItem; splitted: boolean; syncedTimes: boolean; refreshInterval: string; supportedModes: ExploreMode[]; selectedMode: ExploreMode; hasLiveOption: boolean; isLive: boolean; isPaused: boolean; originPanelId: number; queries: DataQuery[]; datasourceLoading: boolean | null; containerWidth: number; } interface DispatchProps { changeDatasource: typeof changeDatasource; clearAll: typeof clearQueries; runQueries: typeof runQueries; closeSplit: typeof splitClose; split: typeof splitOpen; syncTimes: typeof syncTimes; changeRefreshInterval: typeof changeRefreshInterval; changeMode: typeof changeMode; clearOrigin: typeof clearOrigin; updateLocation: typeof updateLocation; } type Props = StateProps & DispatchProps & OwnProps; export class UnConnectedExploreToolbar extends PureComponent { onChangeDatasource = async (option: { value: any }) => { this.props.changeDatasource(this.props.exploreId, option.value); }; onClearAll = () => { this.props.clearAll(this.props.exploreId); }; onRunQuery = () => { return this.props.runQueries(this.props.exploreId); }; onChangeRefreshInterval = (item: string) => { const { changeRefreshInterval, exploreId } = this.props; changeRefreshInterval(exploreId, item); }; onModeChange = (mode: ExploreMode) => { const { changeMode, exploreId } = this.props; changeMode(exploreId, mode); }; onChangeTimeSync = () => { const { syncTimes, exploreId } = this.props; syncTimes(exploreId); }; returnToPanel = async ({ withChanges = false } = {}) => { const { originPanelId } = this.props; const dashboardSrv = getDashboardSrv(); const dash = dashboardSrv.getCurrent(); const titleSlug = kbn.slugifyForUrl(dash.title); if (!withChanges) { this.props.clearOrigin(); } const dashViewOptions = { fullscreen: withChanges || dash.meta.fullscreen, edit: withChanges || dash.meta.isEditing, }; this.props.updateLocation({ path: `/d/${dash.uid}/:${titleSlug}`, query: { ...omitBy(dashViewOptions, v => !v), panelId: originPanelId, }, }); }; render() { const { datasourceMissing, exploreDatasources, closeSplit, exploreId, loading, range, timeZone, selectedDatasource, splitted, syncedTimes, refreshInterval, onChangeTime, split, supportedModes, selectedMode, hasLiveOption, isLive, isPaused, originPanelId, datasourceLoading, containerWidth, } = this.props; const styles = getStyles(); const originDashboardIsEditable = Number.isInteger(originPanelId); const panelReturnClasses = classNames('btn', 'navbar-button', { 'btn--radius-right-0': originDashboardIsEditable, 'navbar-button navbar-button--border-right-0': originDashboardIsEditable, }); const showSmallDataSourcePicker = (splitted ? containerWidth < 690 : containerWidth < 800) || false; const showSmallTimePicker = splitted || containerWidth < 1210; return (
{exploreId === 'left' && ( Explore )}
{splitted && ( closeSplit(exploreId)}> )}
{!datasourceMissing ? (
{supportedModes.length > 1 ? (
{'Metrics'} {'Logs'}
) : null}
) : null} {Number.isInteger(originPanelId) && !splitted && (
{originDashboardIsEditable && ( this.returnToPanel({ withChanges: true })} maxMenuHeight={380} /> )}
)} {exploreId === 'left' && !splitted ? (
) : null} {!isLive && (
)}
{refreshInterval && }
{hasLiveOption && (
{controls => ( )}
)}
); } } const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps => { const splitted = state.explore.split; const syncedTimes = state.explore.syncedTimes; const exploreItem: ExploreItemState = state.explore[exploreId]; const { datasourceInstance, datasourceMissing, exploreDatasources, range, refreshInterval, loading, supportedModes, mode, isLive, isPaused, originPanelId, queries, datasourceLoading, containerWidth, } = exploreItem; const selectedDatasource = datasourceInstance ? exploreDatasources.find(datasource => datasource.name === datasourceInstance.name) : undefined; const hasLiveOption = datasourceInstance && datasourceInstance.meta && datasourceInstance.meta.streaming ? true : false; return { datasourceMissing, exploreDatasources, loading, range, timeZone: getTimeZone(state.user), selectedDatasource, splitted, refreshInterval, supportedModes, selectedMode: supportedModes.includes(mode) ? mode : supportedModes[0], hasLiveOption, isLive, isPaused, originPanelId, queries, syncedTimes, datasourceLoading, containerWidth, }; }; const mapDispatchToProps: DispatchProps = { changeDatasource, updateLocation, changeRefreshInterval, clearAll: clearQueries, runQueries, closeSplit: splitClose, split: splitOpen, syncTimes, changeMode: changeMode, clearOrigin, }; export const ExploreToolbar = hot(module)( connect( mapStateToProps, mapDispatchToProps )(UnConnectedExploreToolbar) );