Commit d426981d by Johannes Schill

fix: Add Pages component to Plugins and TeamList

parent b2961a4b
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,23 +47,23 @@ export class PluginListPage extends PureComponent<Props> { ...@@ -48,23 +47,23 @@ 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 <>
searchQuery={searchQuery} <OrgActionBar
layoutMode={layoutMode} searchQuery={searchQuery}
onSetLayoutMode={mode => setPluginsLayoutMode(mode)} layoutMode={layoutMode}
setSearchQuery={query => setPluginsSearchQuery(query)} onSetLayoutMode={mode => setPluginsLayoutMode(mode)}
linkButton={linkButton} setSearchQuery={query => setPluginsSearchQuery(query)}
/> linkButton={linkButton}
{hasFetched ? ( />
plugins && <PluginList plugins={plugins} layoutMode={layoutMode} /> {hasFetched && plugins && (
) : ( plugins && <PluginList plugins={plugins} layoutMode={layoutMode} />
<PageLoader pageName="Plugins" /> )}
)} </>
</div> </Page.Contents>
</div> </Page>
); );
} }
} }
......
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> { ...@@ -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>
); );
} }
} }
......
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