Skip to content

N
nexpie-grafana-theme
Commit 6a699af2 by Andrej Ocenas Committed by GitHub
Options

Explore: Refactor mode selection (#19356)

parent ac3fb645
Showing with 10 additions and 47 deletions
public/app/features/explore/ExploreToolbar.tsx
...@@ -16,7 +16,7 @@ import { ...@@ -16,7 +16,7 @@ import {
ButtonSelect, ButtonSelect,
SetInterval, SetInterval,
} from '@grafana/ui'; } from '@grafana/ui';
import { RawTimeRange, TimeZone, TimeRange, SelectableValue } from '@grafana/data'; import { RawTimeRange, TimeZone, TimeRange } from '@grafana/data';
import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker'; import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
import { StoreState } from 'app/types/store'; import { StoreState } from 'app/types/store';
import { import {
...@@ -61,8 +61,8 @@ interface StateProps { ...@@ -61,8 +61,8 @@ interface StateProps {
selectedDatasource: DataSourceSelectItem; selectedDatasource: DataSourceSelectItem;
splitted: boolean; splitted: boolean;
refreshInterval: string; refreshInterval: string;
supportedModeOptions: Array<SelectableValue<ExploreMode>>; supportedModes: ExploreMode[];
selectedModeOption: SelectableValue<ExploreMode>; selectedMode: ExploreMode;
hasLiveOption: boolean; hasLiveOption: boolean;
isLive: boolean; isLive: boolean;
isPaused: boolean; isPaused: boolean;
...@@ -150,8 +150,8 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -150,8 +150,8 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
refreshInterval, refreshInterval,
onChangeTime, onChangeTime,
split, split,
supportedModeOptions, supportedModes,
selectedModeOption, selectedMode,
hasLiveOption, hasLiveOption,
isLive, isLive,
isPaused, isPaused,
...@@ -195,14 +195,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -195,14 +195,14 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
current={selectedDatasource} current={selectedDatasource}
/> />
</div> </div>
{supportedModeOptions.length > 1 ? ( {supportedModes.length > 1 ? (
<div className="query-type-toggle"> <div className="query-type-toggle">
<ToggleButtonGroup label="" transparent={true}> <ToggleButtonGroup label="" transparent={true}>
<ToggleButton <ToggleButton
key={ExploreMode.Metrics} key={ExploreMode.Metrics}
value={ExploreMode.Metrics} value={ExploreMode.Metrics}
onChange={this.onModeChange} onChange={this.onModeChange}
selected={selectedModeOption.value === ExploreMode.Metrics} selected={selectedMode === ExploreMode.Metrics}
> >
{'Metrics'} {'Metrics'}
</ToggleButton> </ToggleButton>
...@@ -210,7 +210,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -210,7 +210,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
key={ExploreMode.Logs} key={ExploreMode.Logs}
value={ExploreMode.Logs} value={ExploreMode.Logs}
onChange={this.onModeChange} onChange={this.onModeChange}
selected={selectedModeOption.value === ExploreMode.Logs} selected={selectedMode === ExploreMode.Logs}
> >
{'Logs'} {'Logs'}
</ToggleButton> </ToggleButton>
...@@ -300,41 +300,6 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -300,41 +300,6 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
} }
} }
const getModeOptionsMemoized = memoizeOne(
(
supportedModes: ExploreMode[],
mode: ExploreMode
): [Array<SelectableValue<ExploreMode>>, SelectableValue<ExploreMode>] => {
const supportedModeOptions: Array<SelectableValue<ExploreMode>> = [];
let selectedModeOption = null;
for (const supportedMode of supportedModes) {
switch (supportedMode) {
case ExploreMode.Metrics:
const option1 = {
value: ExploreMode.Metrics,
label: ExploreMode.Metrics,
};
supportedModeOptions.push(option1);
if (mode === ExploreMode.Metrics) {
selectedModeOption = option1;
}
break;
case ExploreMode.Logs:
const option2 = {
value: ExploreMode.Logs,
label: ExploreMode.Logs,
};
supportedModeOptions.push(option2);
if (mode === ExploreMode.Logs) {
selectedModeOption = option2;
}
break;
}
}
return [supportedModeOptions, selectedModeOption];
}
);
const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps => { const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps => {
const splitted = state.explore.split; const splitted = state.explore.split;
const exploreItem: ExploreItemState = state.explore[exploreId]; const exploreItem: ExploreItemState = state.explore[exploreId];
...@@ -358,8 +323,6 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps ...@@ -358,8 +323,6 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
const hasLiveOption = const hasLiveOption =
datasourceInstance && datasourceInstance.meta && datasourceInstance.meta.streaming ? true : false; datasourceInstance && datasourceInstance.meta && datasourceInstance.meta.streaming ? true : false;
const [supportedModeOptions, selectedModeOption] = getModeOptionsMemoized(supportedModes, mode);
return { return {
datasourceMissing, datasourceMissing,
exploreDatasources, exploreDatasources,
...@@ -369,8 +332,8 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps ...@@ -369,8 +332,8 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
selectedDatasource, selectedDatasource,
splitted, splitted,
refreshInterval, refreshInterval,
supportedModeOptions, supportedModes,
selectedModeOption, selectedMode: supportedModes.includes(mode) ? mode : supportedModes[0],
hasLiveOption, hasLiveOption,
isLive, isLive,
isPaused, isPaused,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment