IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

POC of page layout component

Browse Source
This commit is contained in:
Torkel Ödegaard 2019-01-08 08:38:43 +01:00 committed by Johannes Schill
parent 8fef2138b2
commit 7f4a479451
4 changed files with 81 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/app/core/components/Page/Page.tsx Normal file
View File

@ -0,0 +1,26 @@
// Libraries
import React, { Component } from 'react';
// Components
import PageHeader from '../PageHeader/PageHeader';
import PageContents from './PageContents';
interface Props {
title: string;
children: JSX.Element[] | JSX.Element;
}
class Page extends Component<Props> {
static Header = PageHeader;
static Contents = PageContents;
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
export default Page;

29
public/app/core/components/Page/PageContents.tsx Normal file
View File

@ -0,0 +1,29 @@
// Libraries
import React, { Component } from 'react';
// Components
import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
import PageLoader from '../PageLoader/PageLoader';
interface Props {
isLoading?: boolean;
children: JSX.Element[] | JSX.Element;
}
class PageContents extends Component<Props> {
render() {
const { isLoading } = this.props;
return (
<div className="page-container page-body">
<CustomScrollbar>
{isLoading && <PageLoader />}
{this.props.children}
</CustomScrollbar>
</div>
);
}
}
export default PageContents;

2
public/app/core/components/PageLoader/PageLoader.tsx
View File

@ -1,7 +1,7 @@
import React, { SFC } from 'react'; import React, { SFC } from 'react';
interface Props { interface Props {
pageName: string; pageName?: string;
} }
const PageLoader: SFC<Props> = ({ pageName }) => { const PageLoader: SFC<Props> = ({ pageName }) => {

50
public/app/features/datasources/DataSourcesListPage.tsx
View File

@ -1,15 +1,14 @@
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 '../../core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import PageLoader from 'app/core/components/PageLoader/PageLoader'; import OrgActionBar from 'app/core/components/OrgActionBar/OrgActionBar';
import OrgActionBar from '../../core/components/OrgActionBar/OrgActionBar'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import EmptyListCTA from '../../core/components/EmptyListCTA/EmptyListCTA';
import DataSourcesList from './DataSourcesList'; import DataSourcesList from './DataSourcesList';
import { DataSource, NavModel } from 'app/types'; import { DataSource, NavModel } from 'app/types';
import { LayoutMode } from '../../core/components/LayoutSelector/LayoutSelector'; import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector';
import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions'; import { loadDataSources, setDataSourcesLayoutMode, setDataSourcesSearchQuery } from './state/actions';
import { getNavModel } from '../../core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { import {
getDataSources, getDataSources,
getDataSourcesCount, getDataSourcesCount,
@ -67,25 +66,26 @@ export class DataSourcesListPage extends PureComponent<Props> {
}; };
return ( return (
<div> <Page title="Data Sources">
<PageHeader model={navModel} /> <Page.Header model={navModel} />
<div className="page-container page-body"> <Page.Contents isLoading={!hasFetched}>
{!hasFetched && <PageLoader pageName="Data sources" />} <>
{hasFetched && dataSourcesCount === 0 && <EmptyListCTA model={emptyListModel} />} {hasFetched && dataSourcesCount === 0 && <EmptyListCTA model={emptyListModel} />}
{hasFetched && {hasFetched &&
dataSourcesCount > 0 && [ dataSourcesCount > 0 && [
<OrgActionBar <OrgActionBar
layoutMode={layoutMode} layoutMode={layoutMode}
searchQuery={searchQuery} searchQuery={searchQuery}
onSetLayoutMode={mode => setDataSourcesLayoutMode(mode)} onSetLayoutMode={mode => setDataSourcesLayoutMode(mode)}
setSearchQuery={query => setDataSourcesSearchQuery(query)} setSearchQuery={query => setDataSourcesSearchQuery(query)}
linkButton={linkButton} linkButton={linkButton}
key="action-bar" key="action-bar"
/>, />,
<DataSourcesList dataSources={dataSources} layoutMode={layoutMode} key="list" />, <DataSourcesList dataSources={dataSources} layoutMode={layoutMode} key="list" />,
]} ]}
</div> </>
</div> </Page.Contents>
</Page>
); );
} }
} }