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';
interface Props {
pageName: string;
pageName?: string;
}
const PageLoader: SFC<Props> = ({ pageName }) => {

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

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