From 03cebecac36726889d8d72ad5562d0f84b83ea4a Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 13:04:36 +0100 Subject: [PATCH 01/11] fix: Add pageName default to avoid "Loading undefined..." --- public/app/core/components/PageLoader/PageLoader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/core/components/PageLoader/PageLoader.tsx b/public/app/core/components/PageLoader/PageLoader.tsx index 3182695e5e5..6deeabf9a41 100644 --- a/public/app/core/components/PageLoader/PageLoader.tsx +++ b/public/app/core/components/PageLoader/PageLoader.tsx @@ -4,7 +4,7 @@ interface Props { pageName?: string; } -const PageLoader: FC = ({ pageName }) => { +const PageLoader: FC = ({ pageName = '' }) => { const loadingText = `Loading ${pageName}...`; return (
From 730036e18db3f6e53fba5cde9a12c05ed1274470 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 13:07:37 +0100 Subject: [PATCH 02/11] chore: Fix typings and add Page-component to TeamPages #14762 --- .../core/components/PageHeader/PageHeader.tsx | 2 +- public/app/features/teams/TeamPages.tsx | 21 ++++++++++++------- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index 83066054f88..623070651d1 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -80,7 +80,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => { }; export default class PageHeader extends React.Component { - constructor(props) { + constructor(props: Props) { super(props); } diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx index 38ba23262ba..ebbde595601 100644 --- a/public/app/features/teams/TeamPages.tsx +++ b/public/app/features/teams/TeamPages.tsx @@ -3,7 +3,7 @@ import { connect } from 'react-redux'; import _ from 'lodash'; import { hot } from 'react-hot-loader'; import config from 'app/core/config'; -import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import Page from 'app/core/components/Page/Page'; import TeamMembers from './TeamMembers'; import TeamSettings from './TeamSettings'; import TeamGroupSync from './TeamGroupSync'; @@ -24,6 +24,7 @@ export interface Props { interface State { isSyncEnabled: boolean; + isLoading: boolean; } enum PageTypes { @@ -33,10 +34,11 @@ enum PageTypes { } export class TeamPages extends PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { + isLoading: false, isSyncEnabled: config.buildInfo.isEnterprise, }; } @@ -47,8 +49,10 @@ export class TeamPages extends PureComponent { async fetchTeam() { const { loadTeam, teamId } = this.props; - - return await loadTeam(teamId); + this.setState({isLoading: true}); + const team = await loadTeam(teamId); + this.setState({isLoading: false}); + return team; } getCurrentPage() { @@ -78,10 +82,11 @@ export class TeamPages extends PureComponent { const { team, navModel } = this.props; return ( -
- - {team && Object.keys(team).length !== 0 &&
{this.renderPage()}
} -
+ + + {team && Object.keys(team).length !== 0 &&
{this.renderPage()}
} + + ); } } From d9a25ee5059064e45eb2ed63d28b3b25c76c84c9 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 14:17:38 +0100 Subject: [PATCH 03/11] test: Updated snapshot --- .../__snapshots__/TeamPages.test.tsx.snap | 77 +++++++++++-------- 1 file changed, 44 insertions(+), 33 deletions(-) diff --git a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap index f966c52983d..0c09eb3f82d 100644 --- a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap @@ -1,50 +1,61 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render should render component 1`] = ` -
- + -
+ `; exports[`Render should render group sync page 1`] = ` -
- -
+ - -
-
+
+ +
+ + `; exports[`Render should render member page if team not empty 1`] = ` -
- -
+ - -
-
+
+ +
+ + `; exports[`Render should render settings and preferences page 1`] = ` -
- -
+ - -
-
+
+ +
+ + `; From 3372dc9441b5660ccce06ea52b7c7a926da7c921 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 14:40:24 +0100 Subject: [PATCH 04/11] chore: Fix typings and add Page-component to FolderSettingsPage #14762 --- .../features/folders/FolderSettingsPage.tsx | 77 ++++--- .../FolderSettingsPage.test.tsx.snap | 218 +++++++++--------- 2 files changed, 157 insertions(+), 138 deletions(-) diff --git a/public/app/features/folders/FolderSettingsPage.tsx b/public/app/features/folders/FolderSettingsPage.tsx index 1eb7ccafc65..08bc84775dc 100644 --- a/public/app/features/folders/FolderSettingsPage.tsx +++ b/public/app/features/folders/FolderSettingsPage.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import Page from 'app/core/components/Page/Page'; import appEvents from 'app/core/app_events'; import { getNavModel } from 'app/core/selectors/navModel'; import { NavModel, StoreState, FolderState } from 'app/types'; @@ -18,23 +18,35 @@ export interface Props { deleteFolder: typeof deleteFolder; } -export class FolderSettingsPage extends PureComponent { +export interface State { + isLoading: boolean; +} + +export class FolderSettingsPage extends PureComponent { + constructor(props: Props) { + super(props); + this.state = { + isLoading: false + }; + } + componentDidMount() { this.props.getFolderByUid(this.props.folderUid); } - onTitleChange = evt => { + onTitleChange = (evt: React.ChangeEvent) => { this.props.setFolderTitle(evt.target.value); }; - onSave = async evt => { + onSave = async (evt: React.FormEvent) => { evt.preventDefault(); evt.stopPropagation(); - + this.setState({isLoading: true}); await this.props.saveFolder(this.props.folder); + this.setState({isLoading: false}); }; - onDelete = evt => { + onDelete = (evt: React.MouseEvent) => { evt.stopPropagation(); evt.preventDefault(); @@ -53,34 +65,35 @@ export class FolderSettingsPage extends PureComponent { const { navModel, folder } = this.props; return ( -
- -
-

Folder Settings

+ + +
+

Folder Settings

-
-
-
- - -
-
- - -
- +
+
+
+ + +
+
+ + +
+ +
-
-
+ + ); } } diff --git a/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap b/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap index 2de0c193d27..9ffd87e13d5 100644 --- a/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap +++ b/public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap @@ -1,131 +1,137 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render should enable save button 1`] = ` -
- -
+ -

- Folder Settings -

-
-
+
+ - - -
-
- - -
- + + +
+ +
-
-
+ + `; exports[`Render should render component 1`] = ` -
- -
+ -

- Folder Settings -

-
-
+
+ - - -
-
- - -
- + + +
+ +
-
-
+ + `; From 98fa17f0e4c0c91a2e889cb0ccb40871b3ed0f79 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 15:32:44 +0100 Subject: [PATCH 05/11] chore: Fix typings and add Page-component to DataSourceSettingsPage #14762 --- .../settings/DataSourceSettingsPage.tsx | 30 +- .../DataSourceSettingsPage.test.tsx.snap | 783 +++++++++--------- 2 files changed, 412 insertions(+), 401 deletions(-) diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx index 87efed266b0..bb784fd928b 100644 --- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx +++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx @@ -4,8 +4,7 @@ import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; // Components -import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import PageLoader from 'app/core/components/PageLoader/PageLoader'; +import Page from 'app/core/components/Page/Page'; import PluginSettings from './PluginSettings'; import BasicSettings from './BasicSettings'; import ButtonRow from './ButtonRow'; @@ -51,7 +50,7 @@ enum DataSourceStates { } export class DataSourceSettingsPage extends PureComponent { - constructor(props) { + constructor(props: Props) { super(props); this.state = { @@ -65,8 +64,8 @@ export class DataSourceSettingsPage extends PureComponent { await loadDataSource(pageId); } - onSubmit = async event => { - event.preventDefault(); + onSubmit = async (evt: React.FormEvent) => { + evt.preventDefault(); await this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name }); @@ -89,7 +88,7 @@ export class DataSourceSettingsPage extends PureComponent { this.props.deleteDataSource(); }; - onModelChange = dataSource => { + onModelChange = (dataSource: DataSourceSettings) => { this.setState({ dataSource: dataSource, }); @@ -170,17 +169,18 @@ export class DataSourceSettingsPage extends PureComponent { }); } + get hasDataSource() { + return Object.keys(this.props.dataSource).length > 0; + } + render() { const { dataSource, dataSourceMeta, navModel, setDataSourceName, setIsDefault } = this.props; const { testingMessage, testingStatus } = this.state; return ( -
- - {Object.keys(dataSource).length === 0 ? ( - - ) : ( -
+ + + {this.hasDataSource &&
{this.isReadOnly() && this.renderIsReadOnlyMessage()} @@ -225,9 +225,9 @@ export class DataSourceSettingsPage extends PureComponent { />
-
- )} -
+
} + + ); } } diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap index bcd8237ff39..af7895ac6b8 100644 --- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap +++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettingsPage.test.tsx.snap @@ -1,415 +1,426 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render should render alpha info text 1`] = ` -
- -
+ -
-
-
- This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. -
- - -
- +
+ - + > +
+ This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. +
+ + +
+ + +
-
-
+ + `; exports[`Render should render beta info text 1`] = ` -
- -
+ -
-
-
- This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. -
- - -
- +
+ - + > +
+ This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. +
+ + +
+ + +
-
-
+ + `; exports[`Render should render component 1`] = ` -
- -
+ -
-
- - -
- +
+ - + > + + +
+ + +
-
-
+ + `; exports[`Render should render is ready only message 1`] = ` -
- -
+ -
-
-
- This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. -
- - -
- +
+ - + > +
+ This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
+ + +
+ + +
-
-
+ + `; exports[`Render should render loader 1`] = ` -
- + - -
+ `; From 7df00747d3cff6e90e707abf6fbed2ed51a7a152 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 16:25:03 +0100 Subject: [PATCH 06/11] chore: Fix typings and add Page-component to NewDataSourcePage #14762 --- .../datasources/NewDataSourcePage.tsx | 80 ++++++++++--------- .../app/features/datasources/state/actions.ts | 13 ++- .../features/datasources/state/reducers.ts | 6 +- public/app/types/datasources.ts | 1 + 4 files changed, 59 insertions(+), 41 deletions(-) diff --git a/public/app/features/datasources/NewDataSourcePage.tsx b/public/app/features/datasources/NewDataSourcePage.tsx index c6eaa893d97..1d926048b8c 100644 --- a/public/app/features/datasources/NewDataSourcePage.tsx +++ b/public/app/features/datasources/NewDataSourcePage.tsx @@ -1,8 +1,8 @@ import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { hot } from 'react-hot-loader'; -import PageHeader from 'app/core/components/PageHeader/PageHeader'; -import { NavModel, Plugin } from 'app/types'; +import Page from 'app/core/components/Page/Page'; +import { NavModel, Plugin, StoreState } from 'app/types'; import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions'; import { getNavModel } from 'app/core/selectors/navModel'; import { getDataSourceTypes } from './state/selectors'; @@ -10,6 +10,7 @@ import { getDataSourceTypes } from './state/selectors'; export interface Props { navModel: NavModel; dataSourceTypes: Plugin[]; + isLoading: boolean; addDataSource: typeof addDataSource; loadDataSourceTypes: typeof loadDataSourceTypes; dataSourceTypeSearchQuery: string; @@ -21,58 +22,59 @@ class NewDataSourcePage extends PureComponent { this.props.loadDataSourceTypes(); } - onDataSourceTypeClicked = type => { - this.props.addDataSource(type); + onDataSourceTypeClicked = (plugin: Plugin) => { + this.props.addDataSource(plugin); }; - onSearchQueryChange = event => { + onSearchQueryChange = (event: React.ChangeEvent) => { this.props.setDataSourceTypeSearchQuery(event.target.value); }; render() { - const { navModel, dataSourceTypes, dataSourceTypeSearchQuery } = this.props; - + const { navModel, dataSourceTypes, dataSourceTypeSearchQuery, isLoading } = this.props; return ( -
- -
-

Choose data source type

-
- + + +
+

Choose data source type

+
+ +
+
+ {dataSourceTypes.map((plugin, index) => { + return ( +
this.onDataSourceTypeClicked(plugin)} + className="add-data-source-grid-item" + key={`${plugin.id}-${index}`} + > + + {plugin.name} +
+ ); + })} +
-
- {dataSourceTypes.map((type, index) => { - return ( -
this.onDataSourceTypeClicked(type)} - className="add-data-source-grid-item" - key={`${type.id}-${index}`} - > - - {type.name} -
- ); - })} -
-
-
+ + ); } } -function mapStateToProps(state) { +function mapStateToProps(state: StoreState) { return { navModel: getNavModel(state.navIndex, 'datasources'), dataSourceTypes: getDataSourceTypes(state.dataSources), + isLoading: state.dataSources.isLoadingDataSources }; } diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index 008dc9fe816..0fa260ffafa 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -12,6 +12,7 @@ import { Plugin, StoreState } from 'app/types'; export enum ActionTypes { LoadDataSources = 'LOAD_DATA_SOURCES', LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES', + LoadedDataSourceTypes = 'LOADED_DATA_SOURCE_TYPES', LoadDataSource = 'LOAD_DATA_SOURCE', LoadDataSourceMeta = 'LOAD_DATA_SOURCE_META', SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', @@ -38,6 +39,10 @@ interface SetDataSourcesLayoutModeAction { interface LoadDataSourceTypesAction { type: ActionTypes.LoadDataSourceTypes; +} + +interface LoadedDataSourceTypesAction { + type: ActionTypes.LoadedDataSourceTypes; payload: Plugin[]; } @@ -81,8 +86,12 @@ const dataSourceMetaLoaded = (dataSourceMeta: Plugin): LoadDataSourceMetaAction payload: dataSourceMeta, }); -const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadDataSourceTypesAction => ({ +const dataSourceTypesLoad = (): LoadDataSourceTypesAction => ({ type: ActionTypes.LoadDataSourceTypes, +}); + +const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadedDataSourceTypesAction => ({ + type: ActionTypes.LoadedDataSourceTypes, payload: dataSourceTypes, }); @@ -117,6 +126,7 @@ export type Action = | SetDataSourcesLayoutModeAction | UpdateLocationAction | LoadDataSourceTypesAction + | LoadedDataSourceTypesAction | SetDataSourceTypeSearchQueryAction | LoadDataSourceAction | UpdateNavIndexAction @@ -167,6 +177,7 @@ export function addDataSource(plugin: Plugin): ThunkResult { export function loadDataSourceTypes(): ThunkResult { return async dispatch => { + dispatch(dataSourceTypesLoad()); const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' }); dispatch(dataSourceTypesLoaded(result)); }; diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index 7be93f5a644..66151990aea 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -12,6 +12,7 @@ const initialState: DataSourcesState = { dataSourceTypes: [] as Plugin[], dataSourceTypeSearchQuery: '', hasFetched: false, + isLoadingDataSources: false, dataSourceMeta: {} as Plugin, }; @@ -30,7 +31,10 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo return { ...state, layoutMode: action.payload }; case ActionTypes.LoadDataSourceTypes: - return { ...state, dataSourceTypes: action.payload }; + return { ...state, dataSourceTypes: [], isLoadingDataSources: true }; + + case ActionTypes.LoadedDataSourceTypes: + return { ...state, dataSourceTypes: action.payload, isLoadingDataSources: false }; case ActionTypes.SetDataSourceTypeSearchQuery: return { ...state, dataSourceTypeSearchQuery: action.payload }; diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 729760b41ea..da81a3023b7 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -12,4 +12,5 @@ export interface DataSourcesState { dataSource: DataSourceSettings; dataSourceMeta: Plugin; hasFetched: boolean; + isLoadingDataSources: boolean; } From acbcca11021f1c79254ff8744b36206830efacc9 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 16:43:57 +0100 Subject: [PATCH 07/11] fix: Add plugins to StoreState interface --- public/app/types/store.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/public/app/types/store.ts b/public/app/types/store.ts index 0f5ad8cd088..78832052e96 100644 --- a/public/app/types/store.ts +++ b/public/app/types/store.ts @@ -9,6 +9,7 @@ import { ExploreState } from './explore'; import { UsersState, UserState } from './user'; import { OrganizationState } from './organization'; import { AppNotificationsState } from './appNotifications'; +import { PluginsState } from './plugins'; export interface StoreState { navIndex: NavIndex; @@ -24,4 +25,5 @@ export interface StoreState { organization: OrganizationState; appNotifications: AppNotificationsState; user: UserState; + plugins: PluginsState; } From e448a140f54fc2f37f6eff9b85e857ee430d158e Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 17:11:55 +0100 Subject: [PATCH 08/11] chore: Fix typings and add Page-component to DataSourceDashboards #14762 --- .../datasources/DataSourceDashboards.test.tsx | 1 + .../datasources/DataSourceDashboards.tsx | 29 ++++++++++--------- .../DataSourceDashboards.test.tsx.snap | 15 +++++----- public/app/features/plugins/state/actions.ts | 19 ++++++++++-- public/app/features/plugins/state/reducers.ts | 6 +++- public/app/types/plugins.ts | 1 + 6 files changed, 45 insertions(+), 26 deletions(-) diff --git a/public/app/features/datasources/DataSourceDashboards.test.tsx b/public/app/features/datasources/DataSourceDashboards.test.tsx index 1cc4933519e..32e1d66928c 100644 --- a/public/app/features/datasources/DataSourceDashboards.test.tsx +++ b/public/app/features/datasources/DataSourceDashboards.test.tsx @@ -14,6 +14,7 @@ const setup = (propOverrides?: object) => { loadDataSource: jest.fn(), loadPluginDashboards: jest.fn(), removeDashboard: jest.fn(), + isLoading: false }; Object.assign(props, propOverrides); diff --git a/public/app/features/datasources/DataSourceDashboards.tsx b/public/app/features/datasources/DataSourceDashboards.tsx index 327908af44a..382f9433f46 100644 --- a/public/app/features/datasources/DataSourceDashboards.tsx +++ b/public/app/features/datasources/DataSourceDashboards.tsx @@ -4,7 +4,7 @@ import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; // Components -import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import Page from 'app/core/components/Page/Page'; import DashboardTable from './DashboardsTable'; // Actions & Selectors @@ -16,7 +16,7 @@ import { importDashboard, removeDashboard } from '../dashboard/state/actions'; import { getDataSource } from './state/selectors'; // Types -import { NavModel, PluginDashboard } from 'app/types'; +import { NavModel, PluginDashboard, StoreState } from 'app/types'; import { DataSourceSettings } from '@grafana/ui/src/types'; export interface Props { @@ -28,6 +28,7 @@ export interface Props { loadDataSource: typeof loadDataSource; loadPluginDashboards: typeof loadPluginDashboards; removeDashboard: typeof removeDashboard; + isLoading: boolean; } export class DataSourceDashboards extends PureComponent { @@ -64,30 +65,30 @@ export class DataSourceDashboards extends PureComponent { }; render() { - const { dashboards, navModel } = this.props; + const { dashboards, navModel, isLoading } = this.props; return ( -
- -
+ + this.onImport(dashboard, overwrite)} - onRemove={dashboard => this.onRemove(dashboard)} - /> -
-
+ dashboards={dashboards} + onImport={(dashboard, overwrite) => this.onImport(dashboard, overwrite)} + onRemove={dashboard => this.onRemove(dashboard)} + /> + + + ); } } -function mapStateToProps(state) { +function mapStateToProps(state: StoreState) { const pageId = getRouteParamsId(state.location); - return { navModel: getNavModel(state.navIndex, `datasource-dashboards-${pageId}`), pageId: pageId, dashboards: state.plugins.dashboards, dataSource: getDataSource(state.dataSources, pageId), + isLoading: state.plugins.isLoadingPluginDashboards }; } diff --git a/public/app/features/datasources/__snapshots__/DataSourceDashboards.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourceDashboards.test.tsx.snap index 7a4f05a227f..28b20de8a18 100644 --- a/public/app/features/datasources/__snapshots__/DataSourceDashboards.test.tsx.snap +++ b/public/app/features/datasources/__snapshots__/DataSourceDashboards.test.tsx.snap @@ -1,18 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Render should render component 1`] = ` -
- -
+ -
-
+ + `; diff --git a/public/app/features/plugins/state/actions.ts b/public/app/features/plugins/state/actions.ts index 9f53f3c1fd0..a60bb6029b9 100644 --- a/public/app/features/plugins/state/actions.ts +++ b/public/app/features/plugins/state/actions.ts @@ -7,6 +7,7 @@ import { PluginDashboard } from '../../../types/plugins'; export enum ActionTypes { LoadPlugins = 'LOAD_PLUGINS', LoadPluginDashboards = 'LOAD_PLUGIN_DASHBOARDS', + LoadedPluginDashboards = 'LOADED_PLUGIN_DASHBOARDS', SetPluginsSearchQuery = 'SET_PLUGIN_SEARCH_QUERY', SetLayoutMode = 'SET_LAYOUT_MODE', } @@ -18,6 +19,10 @@ export interface LoadPluginsAction { export interface LoadPluginDashboardsAction { type: ActionTypes.LoadPluginDashboards; +} + +export interface LoadedPluginDashboardsAction { + type: ActionTypes.LoadedPluginDashboards; payload: PluginDashboard[]; } @@ -46,12 +51,20 @@ const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({ payload: plugins, }); -const pluginDashboardsLoaded = (dashboards: PluginDashboard[]): LoadPluginDashboardsAction => ({ +const pluginDashboardsLoad = (): LoadPluginDashboardsAction => ({ type: ActionTypes.LoadPluginDashboards, +}); + +const pluginDashboardsLoaded = (dashboards: PluginDashboard[]): LoadedPluginDashboardsAction => ({ + type: ActionTypes.LoadedPluginDashboards, payload: dashboards, }); -export type Action = LoadPluginsAction | LoadPluginDashboardsAction | SetPluginsSearchQueryAction | SetLayoutModeAction; +export type Action = LoadPluginsAction + | LoadPluginDashboardsAction + | LoadedPluginDashboardsAction + | SetPluginsSearchQueryAction + | SetLayoutModeAction; type ThunkResult = ThunkAction; @@ -64,8 +77,8 @@ export function loadPlugins(): ThunkResult { export function loadPluginDashboards(): ThunkResult { return async (dispatch, getStore) => { + dispatch(pluginDashboardsLoad()); const dataSourceType = getStore().dataSources.dataSource.type; - const response = await getBackendSrv().get(`api/plugins/${dataSourceType}/dashboards`); dispatch(pluginDashboardsLoaded(response)); }; diff --git a/public/app/features/plugins/state/reducers.ts b/public/app/features/plugins/state/reducers.ts index 0d464ef1772..842775370f5 100644 --- a/public/app/features/plugins/state/reducers.ts +++ b/public/app/features/plugins/state/reducers.ts @@ -9,6 +9,7 @@ export const initialState: PluginsState = { layoutMode: LayoutModes.Grid, hasFetched: false, dashboards: [] as PluginDashboard[], + isLoadingPluginDashboards: false }; export const pluginsReducer = (state = initialState, action: Action): PluginsState => { @@ -23,7 +24,10 @@ export const pluginsReducer = (state = initialState, action: Action): PluginsSta return { ...state, layoutMode: action.payload }; case ActionTypes.LoadPluginDashboards: - return { ...state, dashboards: action.payload }; + return { ...state, dashboards: [], isLoadingPluginDashboards: true }; + + case ActionTypes.LoadedPluginDashboards: + return { ...state, dashboards: action.payload, isLoadingPluginDashboards: false }; } return state; }; diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index cd608dc11e3..51c3b7b0476 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -47,6 +47,7 @@ export interface PluginsState { layoutMode: string; hasFetched: boolean; dashboards: PluginDashboard[]; + isLoadingPluginDashboards: boolean; } export interface VariableQueryProps { From d54c4173caa6bf4f5bfcb48776536831cc15c77c Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Mon, 28 Jan 2019 22:16:45 +0100 Subject: [PATCH 09/11] chore: Fix typings and add Page-component to AlertRuleList #14762 --- .../features/alerting/AlertRuleList.test.tsx | 5 ++-- .../app/features/alerting/AlertRuleList.tsx | 26 ++++++++-------- .../__snapshots__/AlertRuleList.test.tsx.snap | 30 ++++++++----------- public/app/features/alerting/state/actions.ts | 18 ++++++++--- .../features/alerting/state/reducers.test.ts | 2 +- .../app/features/alerting/state/reducers.ts | 10 +++++-- public/app/types/alerting.ts | 1 + 7 files changed, 52 insertions(+), 40 deletions(-) diff --git a/public/app/features/alerting/AlertRuleList.test.tsx b/public/app/features/alerting/AlertRuleList.test.tsx index 2d1cf653540..ce3b8d47142 100644 --- a/public/app/features/alerting/AlertRuleList.test.tsx +++ b/public/app/features/alerting/AlertRuleList.test.tsx @@ -18,6 +18,7 @@ const setup = (propOverrides?: object) => { togglePauseAlertRule: jest.fn(), stateFilter: '', search: '', + isLoading: false }; Object.assign(props, propOverrides); @@ -121,7 +122,7 @@ describe('Functions', () => { describe('State filter changed', () => { it('should update location', () => { const { instance } = setup(); - const mockEvent = { target: { value: 'alerting' } }; + const mockEvent = { target: { value: 'alerting' } } as React.ChangeEvent; instance.onStateFilterChanged(mockEvent); @@ -146,7 +147,7 @@ describe('Functions', () => { describe('Search query change', () => { it('should set search query', () => { const { instance } = setup(); - const mockEvent = { target: { value: 'dashboard' } }; + const mockEvent = { target: { value: 'dashboard' } } as React.ChangeEvent; instance.onSearchQueryChange(mockEvent); diff --git a/public/app/features/alerting/AlertRuleList.tsx b/public/app/features/alerting/AlertRuleList.tsx index f94134f3ee1..a6c770aad9b 100644 --- a/public/app/features/alerting/AlertRuleList.tsx +++ b/public/app/features/alerting/AlertRuleList.tsx @@ -1,7 +1,8 @@ import React, { PureComponent } from 'react'; import { hot } from 'react-hot-loader'; import { connect } from 'react-redux'; -import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import Page from 'app/core/components/Page/Page'; +// import PageHeader from 'app/core/components/PageHeader/PageHeader'; import AlertRuleItem from './AlertRuleItem'; import appEvents from 'app/core/app_events'; import { updateLocation } from 'app/core/actions'; @@ -19,6 +20,7 @@ export interface Props { togglePauseAlertRule: typeof togglePauseAlertRule; stateFilter: string; search: string; + isLoading: boolean; } export class AlertRuleList extends PureComponent { @@ -54,9 +56,9 @@ export class AlertRuleList extends PureComponent { return 'all'; } - onStateFilterChanged = event => { + onStateFilterChanged = (evt: React.ChangeEvent) => { this.props.updateLocation({ - query: { state: event.target.value }, + query: { state: evt.target.value }, }); }; @@ -68,8 +70,8 @@ export class AlertRuleList extends PureComponent { }); }; - onSearchQueryChange = event => { - const { value } = event.target; + onSearchQueryChange = (evt: React.ChangeEvent) => { + const { value } = evt.target; this.props.setSearchQuery(value); }; @@ -77,7 +79,7 @@ export class AlertRuleList extends PureComponent { this.props.togglePauseAlertRule(rule.id, { paused: rule.state !== 'paused' }); }; - alertStateFilterOption = ({ text, value }) => { + alertStateFilterOption = ({ text, value }: { text: string; value: string; }) => { return (