fix: Add Pages component to Plugins and TeamList

This commit is contained in:
Johannes Schill 2019-01-14 17:03:49 +01:00
parent b2961a4b4a
commit d426981d1d
2 changed files with 25 additions and 25 deletions

View File

@ -1,9 +1,8 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar'; import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
import PageLoader from 'app/core/components/PageLoader/PageLoader';
import PluginList from './PluginList'; import PluginList from './PluginList';
import { NavModel, Plugin } from 'app/types'; import { NavModel, Plugin } from 'app/types';
import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './state/actions'; import { loadPlugins, setPluginsLayoutMode, setPluginsSearchQuery } from './state/actions';
@ -48,9 +47,10 @@ export class PluginListPage extends PureComponent<Props> {
}; };
return ( return (
<div> <Page title="Configuration: Plugins">
<PageHeader model={navModel} /> <Page.Header model={navModel} />
<div className="page-container page-body"> <Page.Contents isLoading={!hasFetched}>
<>
<OrgActionBar <OrgActionBar
searchQuery={searchQuery} searchQuery={searchQuery}
layoutMode={layoutMode} layoutMode={layoutMode}
@ -58,13 +58,12 @@ export class PluginListPage extends PureComponent<Props> {
setSearchQuery={query => setPluginsSearchQuery(query)} setSearchQuery={query => setPluginsSearchQuery(query)}
linkButton={linkButton} linkButton={linkButton}
/> />
{hasFetched ? ( {hasFetched && plugins && (
plugins && <PluginList plugins={plugins} layoutMode={layoutMode} /> plugins && <PluginList plugins={plugins} layoutMode={layoutMode} />
) : (
<PageLoader pageName="Plugins" />
)} )}
</div> </>
</div> </Page.Contents>
</Page>
); );
} }
} }

View File

@ -1,10 +1,9 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import { DeleteButton } from '@grafana/ui'; import { DeleteButton } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import PageLoader from 'app/core/components/PageLoader/PageLoader';
import { NavModel, Team } from '../../types'; import { NavModel, Team } from '../../types';
import { loadTeams, deleteTeam, setSearchQuery } from './state/actions'; import { loadTeams, deleteTeam, setSearchQuery } from './state/actions';
import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors'; import { getSearchQuery, getTeams, getTeamsCount } from './state/selectors';
@ -141,10 +140,12 @@ export class TeamList extends PureComponent<Props, any> {
const { hasFetched, navModel } = this.props; const { hasFetched, navModel } = this.props;
return ( return (
<div> <Page title="Configuration: Teams">
<PageHeader model={navModel} /> <Page.Header model={navModel} />
{hasFetched ? this.renderList() : <PageLoader pageName="Teams" />} <Page.Contents isLoading={!hasFetched}>
</div> {hasFetched && this.renderList()}
</Page.Contents>
</Page>
); );
} }
} }