diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx index 55968e5278d..222587d9249 100644 --- a/public/app/features/datasources/settings/DataSourceSettings.test.tsx +++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx @@ -16,6 +16,7 @@ const setup = (propOverrides?: object) => { setDataSourceName: jest.fn(), updateDataSource: jest.fn(), testing: {} as DataSourceTest, + clearTesting: jest.fn(), }; Object.assign(props, propOverrides); diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx index 8fe580ee97c..e9a1b49c02a 100644 --- a/public/app/features/datasources/settings/DataSourceSettings.tsx +++ b/public/app/features/datasources/settings/DataSourceSettings.tsx @@ -8,7 +8,7 @@ import PluginSettings from './PluginSettings'; import BasicSettings from './BasicSettings'; import ButtonRow from './ButtonRow'; import appEvents from '../../../core/app_events'; -import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions'; +import { clearTesting, deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions'; import { getNavModel } from '../../../core/selectors/navModel'; import { getRouteParamsId } from '../../../core/selectors/location'; import { getDataSource, getDataSourceMeta } from '../state/selectors'; @@ -23,9 +23,11 @@ export interface Props { loadDataSource: typeof loadDataSource; setDataSourceName: typeof setDataSourceName; updateDataSource: typeof updateDataSource; + clearTesting: typeof clearTesting; } interface State { dataSource: DataSource; + hasClosedTest: boolean; } enum DataSourceStates { @@ -36,6 +38,7 @@ enum DataSourceStates { export class DataSourceSettings extends PureComponent { state = { dataSource: {} as DataSource, + hasClosedTest: false, }; async componentDidMount() { @@ -44,6 +47,23 @@ export class DataSourceSettings extends PureComponent { await loadDataSource(pageId); } + componentDidUpdate(prevProps) { + const { clearTesting } = this.props; + + if (!this.state.hasClosedTest && prevProps.testing.status === 'success') { + this.setState({ hasClosedTest: true }); + + setTimeout(() => { + clearTesting(); + this.setState({ hasClosedTest: false }); + }, 3000); + } + } + + componentWillUnmount() { + this.props.clearTesting(); + } + onSubmit = event => { event.preventDefault(); @@ -194,6 +214,7 @@ const mapDispatchToProps = { loadDataSource, setDataSourceName, updateDataSource, + clearTesting, }; export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings)); diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index 64b795eb107..8fda109c906 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -21,6 +21,7 @@ export enum ActionTypes { SetDataSourceTestingProgess = 'SET_TESTING_PROGRESS', SetDataSourceTestingSuccess = 'SET_DATA_SOURCE_TESTING_SUCCESS', SetDataSourceTestingFail = 'SET_DATA_SOURCE_TESTING_FAIL', + ClearTesting = 'CLEAR_TEST', } interface LoadDataSourcesAction { @@ -78,6 +79,10 @@ interface SetDataSourceTestingFailAction { payload: string; } +interface ClearTestingAction { + type: ActionTypes.ClearTesting; +} + const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ type: ActionTypes.LoadDataSources, payload: dataSources, @@ -118,6 +123,10 @@ export const setDataSourceName = (name: string) => ({ payload: name, }); +export const clearTesting = (): ClearTestingAction => ({ + type: ActionTypes.ClearTesting, +}); + const setDataSourceTestingProgress = (state: boolean): SetDataSourceTestingProgessAction => ({ type: ActionTypes.SetDataSourceTestingProgess, payload: state, @@ -149,7 +158,8 @@ export type Action = | SetDataSourceNameAction | SetDataSourceTestingProgessAction | SetDataSourceTestingSuccessAction - | SetDataSourceTestingFailAction; + | SetDataSourceTestingFailAction + | ClearTestingAction; type ThunkResult = ThunkAction; diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index a09992a7a1f..2fc6500e522 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -1,4 +1,4 @@ -import { DataSource, DataSourcesState, DataSourceTest, Plugin } from 'app/types'; +import { DataSource, DataSourcesState, Plugin } from 'app/types'; import { Action, ActionTypes } from './actions'; import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; @@ -12,7 +12,7 @@ const initialState: DataSourcesState = { dataSourceTypeSearchQuery: '', hasFetched: false, dataSourceMeta: {} as Plugin, - testing: {} as DataSourceTest, + testing: { inProgress: false, status: '', message: '' }, }; export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => { @@ -59,6 +59,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo ...state, testing: { status: 'error', message: action.payload, inProgress: false }, }; + + case ActionTypes.ClearTesting: + return { ...state, testing: { inProgress: false, status: '', message: '' } }; } return state;