Explore: Refactor RichHistory.tsx into a functional component (#78144)

* Refactor to functional component

* Remove theme as it's unused
This commit is contained in:
Haris Rozajac 2023-11-15 07:15:55 -07:00 committed by GitHub
parent c551c9e71f
commit 2a675d5905
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 100 additions and 123 deletions

View File

@ -1,7 +1,6 @@
import { render, screen } from '@testing-library/react';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { SortOrder } from 'app/core/utils/richHistory';
import { RichHistory, RichHistoryProps, Tabs } from './RichHistory';
@ -21,7 +20,6 @@ jest.mock('@grafana/runtime', () => ({
const setup = (propOverrides?: Partial<RichHistoryProps>) => {
const props: RichHistoryProps = {
theme: {} as GrafanaTheme2,
exploreId: 'left',
height: 100,
activeDatasourceInstance: 'Test datasource',

View File

@ -1,8 +1,8 @@
import { debounce } from 'lodash';
import React, { PureComponent } from 'react';
import React, { useState, useEffect } from 'react';
import { SelectableValue } from '@grafana/data';
import { Themeable2, TabbedContainer, TabConfig, withTheme2 } from '@grafana/ui';
import { TabbedContainer, TabConfig } from '@grafana/ui';
import { t } from 'app/core/internationalization';
import { SortOrder, RichHistorySearchFilters, RichHistorySettings } from 'app/core/utils/richHistory';
import { RichHistoryQuery } from 'app/types/explore';
@ -27,7 +27,7 @@ export const getSortOrderOptions = () =>
{ label: t('explore.rich-history.datasource-z-a', 'Data source Z-A'), value: SortOrder.DatasourceZA },
].filter((option) => supportedFeatures().availableFilters.includes(option.value));
export interface RichHistoryProps extends Themeable2 {
export interface RichHistoryProps {
richHistory: RichHistoryQuery[];
richHistoryTotal?: number;
richHistorySettings: RichHistorySettings;
@ -45,141 +45,120 @@ export interface RichHistoryProps extends Themeable2 {
onClose: () => void;
}
type RichHistoryState = {
loading: boolean;
};
export function RichHistory(props: RichHistoryProps) {
const {
richHistory,
richHistoryTotal,
height,
exploreId,
deleteRichHistory,
onClose,
firstTab,
activeDatasourceInstance,
} = props;
class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
state: RichHistoryState = {
loading: false,
const [loading, setLoading] = useState(false);
const updateSettings = (settingsToUpdate: Partial<RichHistorySettings>) => {
props.updateHistorySettings({ ...props.richHistorySettings, ...settingsToUpdate });
};
updateSettings = (settingsToUpdate: Partial<RichHistorySettings>) => {
this.props.updateHistorySettings({ ...this.props.richHistorySettings, ...settingsToUpdate });
};
updateFilters = (filtersToUpdate?: Partial<RichHistorySearchFilters>) => {
const updateFilters = (filtersToUpdate?: Partial<RichHistorySearchFilters>) => {
const filters = {
...this.props.richHistorySearchFilters!,
...props.richHistorySearchFilters!,
...filtersToUpdate,
page: 1, // always load fresh results when updating filters
};
this.props.updateHistorySearchFilters(this.props.exploreId, filters);
this.loadRichHistory();
props.updateHistorySearchFilters(props.exploreId, filters);
loadRichHistory();
};
clearResults = () => {
this.props.clearRichHistoryResults(this.props.exploreId);
};
loadRichHistory = debounce(() => {
this.props.loadRichHistory(this.props.exploreId);
this.setState({
loading: true,
});
const loadRichHistory = debounce(() => {
props.loadRichHistory(props.exploreId);
setLoading(true);
}, 300);
onChangeRetentionPeriod = (retentionPeriod: SelectableValue<number>) => {
const onChangeRetentionPeriod = (retentionPeriod: SelectableValue<number>) => {
if (retentionPeriod.value !== undefined) {
this.updateSettings({ retentionPeriod: retentionPeriod.value });
updateSettings({ retentionPeriod: retentionPeriod.value });
}
};
toggleStarredTabAsFirstTab = () =>
this.updateSettings({ starredTabAsFirstTab: !this.props.richHistorySettings.starredTabAsFirstTab });
const toggleStarredTabAsFirstTab = () =>
updateSettings({ starredTabAsFirstTab: !props.richHistorySettings.starredTabAsFirstTab });
toggleActiveDatasourceOnly = () =>
this.updateSettings({ activeDatasourceOnly: !this.props.richHistorySettings.activeDatasourceOnly });
const toggleActiveDatasourceOnly = () =>
updateSettings({ activeDatasourceOnly: !props.richHistorySettings.activeDatasourceOnly });
componentDidUpdate(prevProps: Readonly<RichHistoryProps>) {
if (prevProps.richHistory !== this.props.richHistory) {
this.setState({
loading: false,
});
}
}
useEffect(() => {
setLoading(false);
}, [richHistory]);
render() {
const {
richHistory,
richHistoryTotal,
height,
exploreId,
deleteRichHistory,
onClose,
firstTab,
activeDatasourceInstance,
} = this.props;
const { loading } = this.state;
const QueriesTab: TabConfig = {
label: t('explore.rich-history.query-history', 'Query history'),
value: Tabs.RichHistory,
content: (
<RichHistoryQueriesTab
queries={richHistory}
totalQueries={richHistoryTotal || 0}
loading={loading}
updateFilters={this.updateFilters}
clearRichHistoryResults={() => this.props.clearRichHistoryResults(this.props.exploreId)}
loadMoreRichHistory={() => this.props.loadMoreRichHistory(this.props.exploreId)}
activeDatasourceInstance={activeDatasourceInstance}
richHistorySettings={this.props.richHistorySettings}
richHistorySearchFilters={this.props.richHistorySearchFilters}
exploreId={exploreId}
height={height}
/>
),
icon: 'history',
};
const StarredTab: TabConfig = {
label: t('explore.rich-history.starred', 'Starred'),
value: Tabs.Starred,
content: (
<RichHistoryStarredTab
queries={richHistory}
totalQueries={richHistoryTotal || 0}
loading={loading}
activeDatasourceInstance={activeDatasourceInstance}
updateFilters={this.updateFilters}
clearRichHistoryResults={() => this.props.clearRichHistoryResults(this.props.exploreId)}
loadMoreRichHistory={() => this.props.loadMoreRichHistory(this.props.exploreId)}
richHistorySettings={this.props.richHistorySettings}
richHistorySearchFilters={this.props.richHistorySearchFilters}
exploreId={exploreId}
/>
),
icon: 'star',
};
const SettingsTab: TabConfig = {
label: t('explore.rich-history.settings', 'Settings'),
value: Tabs.Settings,
content: (
<RichHistorySettingsTab
retentionPeriod={this.props.richHistorySettings.retentionPeriod}
starredTabAsFirstTab={this.props.richHistorySettings.starredTabAsFirstTab}
activeDatasourceOnly={this.props.richHistorySettings.activeDatasourceOnly}
onChangeRetentionPeriod={this.onChangeRetentionPeriod}
toggleStarredTabAsFirstTab={this.toggleStarredTabAsFirstTab}
toggleactiveDatasourceOnly={this.toggleActiveDatasourceOnly}
deleteRichHistory={deleteRichHistory}
/>
),
icon: 'sliders-v-alt',
};
let tabs = [QueriesTab, StarredTab, SettingsTab];
return (
<TabbedContainer
tabs={tabs}
onClose={onClose}
defaultTab={firstTab}
closeIconTooltip={t('explore.rich-history.close-tooltip', 'Close query history')}
const QueriesTab: TabConfig = {
label: t('explore.rich-history.query-history', 'Query history'),
value: Tabs.RichHistory,
content: (
<RichHistoryQueriesTab
queries={richHistory}
totalQueries={richHistoryTotal || 0}
loading={loading}
updateFilters={updateFilters}
clearRichHistoryResults={() => props.clearRichHistoryResults(props.exploreId)}
loadMoreRichHistory={() => props.loadMoreRichHistory(props.exploreId)}
activeDatasourceInstance={activeDatasourceInstance}
richHistorySettings={props.richHistorySettings}
richHistorySearchFilters={props.richHistorySearchFilters}
exploreId={exploreId}
height={height}
/>
);
}
}
),
icon: 'history',
};
export const RichHistory = withTheme2(UnThemedRichHistory);
const StarredTab: TabConfig = {
label: t('explore.rich-history.starred', 'Starred'),
value: Tabs.Starred,
content: (
<RichHistoryStarredTab
queries={richHistory}
totalQueries={richHistoryTotal || 0}
loading={loading}
activeDatasourceInstance={activeDatasourceInstance}
updateFilters={updateFilters}
clearRichHistoryResults={() => props.clearRichHistoryResults(props.exploreId)}
loadMoreRichHistory={() => props.loadMoreRichHistory(props.exploreId)}
richHistorySettings={props.richHistorySettings}
richHistorySearchFilters={props.richHistorySearchFilters}
exploreId={exploreId}
/>
),
icon: 'star',
};
const SettingsTab: TabConfig = {
label: t('explore.rich-history.settings', 'Settings'),
value: Tabs.Settings,
content: (
<RichHistorySettingsTab
retentionPeriod={props.richHistorySettings.retentionPeriod}
starredTabAsFirstTab={props.richHistorySettings.starredTabAsFirstTab}
activeDatasourceOnly={props.richHistorySettings.activeDatasourceOnly}
onChangeRetentionPeriod={onChangeRetentionPeriod}
toggleStarredTabAsFirstTab={toggleStarredTabAsFirstTab}
toggleactiveDatasourceOnly={toggleActiveDatasourceOnly}
deleteRichHistory={deleteRichHistory}
/>
),
icon: 'sliders-v-alt',
};
let tabs = [QueriesTab, StarredTab, SettingsTab];
return (
<TabbedContainer
tabs={tabs}
onClose={onClose}
defaultTab={firstTab}
closeIconTooltip={t('explore.rich-history.close-tooltip', 'Close query history')}
/>
);
}