Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update providers page to fit into admin tabs UI

pull/10616/head
Alex P 2017-11-14 10:19:36 -08:00 committed by Jared Scheib
parent d39c71d9cb
commit d40f086f4a
3 changed files with 51 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/admin/components/chronograf/AdminTabs.js
View File

@ -9,9 +9,11 @@ import {
import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs' import {Tab, Tabs, TabPanel, TabPanels, TabList} from 'shared/components/Tabs'
import OrganizationsPage from 'src/admin/containers/chronograf/OrganizationsPage' import OrganizationsPage from 'src/admin/containers/chronograf/OrganizationsPage'
import UsersPage from 'src/admin/containers/chronograf/UsersPage' import UsersPage from 'src/admin/containers/chronograf/UsersPage'
import ProvidersPage from 'src/admin/containers/ProvidersPage'
const ORGANIZATIONS_TAB_NAME = 'Organizations' const ORGANIZATIONS_TAB_NAME = 'Organizations'
const USERS_TAB_NAME = 'Users' const USERS_TAB_NAME = 'Users'
const PROVIDERS_TAB_NAME = 'Providers'
const AdminTabs = ({ const AdminTabs = ({
me: {currentOrganization: meCurrentOrganization, role: meRole, id: meID}, me: {currentOrganization: meCurrentOrganization, role: meRole, id: meID},
@ -31,6 +33,11 @@ const AdminTabs = ({
<UsersPage meID={meID} meCurrentOrganization={meCurrentOrganization} /> <UsersPage meID={meID} meCurrentOrganization={meCurrentOrganization} />
), ),
}, },
{
requiredRole: SUPERADMIN_ROLE,
type: PROVIDERS_TAB_NAME,
component: <ProvidersPage />,
},
].filter(t => isUserAuthorized(meRole, t.requiredRole)) ].filter(t => isUserAuthorized(meRole, t.requiredRole))
return ( return (

74
ui/src/admin/components/chronograf/ProvidersTable.js
View File

@ -32,52 +32,44 @@ class ProvidersTable extends Component {
providerMaps.length === 1 ? '1 Map' : `${providerMaps.length} Maps` providerMaps.length === 1 ? '1 Map' : `${providerMaps.length} Maps`
return ( return (
<div className="container-fluid"> <div className="panel panel-default">
<div className="row"> <div className="panel-heading u-flex u-ai-center u-jc-space-between">
<div className="col-xs-12"> <h2 className="panel-title">
<div className="panel panel-minimal"> {tableTitle}
<div className="panel-heading u-flex u-ai-center u-jc-space-between"> </h2>
<h2 className="panel-title"> <button
{tableTitle} className="btn btn-sm btn-primary"
</h2> onClick={this.handleClickCreateMap}
<button disabled={isCreatingMap}
className="btn btn-sm btn-primary" >
onClick={this.handleClickCreateMap} <span className="icon plus" /> Create Map
disabled={isCreatingMap} </button>
> </div>
<span className="icon plus" /> Create Map <div className="panel-body">
</button> <div className="providers-labels">
</div> <div className="providers-labels--id">ID</div>
<div className="panel-body"> <div className="providers-labels--scheme">Scheme</div>
<div className="providers-labels"> <div className="providers-labels--provider">Provider</div>
<div className="providers-labels--id">ID</div> <div className="providers-labels--providerorg">Provider Org</div>
<div className="providers-labels--scheme">Scheme</div> <div className="providers-labels--arrow" />
<div className="providers-labels--provider">Provider</div> <div className="providers-labels--redirect">Organization</div>
<div className="providers-labels--providerorg"> <div className="providers-labels--delete" />
Provider Org </div>
</div> {/* {isCreatingMap
<div className="providers-labels--arrow" />
<div className="providers-labels--redirect">Organization</div>
<div className="providers-labels--delete" />
</div>
{/* {isCreatingMap
? <NewProviderMap ? <NewProviderMap
onCreateMap={this.handleCreateMap} onCreateMap={this.handleCreateMap}
onDismissCreateMap={this.handleDismissCreateMap} onDismissCreateMap={this.handleDismissCreateMap}
/> />
: null} */} : null} */}
{providerMaps.map(providerMap => {providerMaps.map(providerMap =>
<ProviderMap <ProviderMap
key={providerMap.id} key={providerMap.id}
providerMap={providerMap} providerMap={providerMap}
organizations={organizations} organizations={organizations}
onDelete={onDeleteMap} onDelete={onDeleteMap}
onUpdate={onUpdateMap} onUpdate={onUpdateMap}
/> />
)} )}
</div>
</div>
</div>
</div> </div>
</div> </div>
) )

36
ui/src/admin/containers/ProvidersPage.js
View File

@ -6,7 +6,6 @@ import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
import {publishAutoDismissingNotification} from 'shared/dispatchers' import {publishAutoDismissingNotification} from 'shared/dispatchers'
import ProvidersTable from 'src/admin/components/chronograf/ProvidersTable' import ProvidersTable from 'src/admin/components/chronograf/ProvidersTable'
import FancyScrollbar from 'shared/components/FancyScrollbar'
import {PROVIDER_MAPS} from 'src/admin/constants/dummyProviderMaps' import {PROVIDER_MAPS} from 'src/admin/constants/dummyProviderMaps'
@ -23,8 +22,8 @@ class ProvidersPage extends Component {
handleCreateMap = () => {} handleCreateMap = () => {}
handleUpdateMap = updatedMap => { handleUpdateMap = _updatedMap => {
console.log(updatedMap) // console.log(_updatedMap)
} }
handleDeleteMap = () => {} handleDeleteMap = () => {}
@ -32,28 +31,15 @@ class ProvidersPage extends Component {
render() { render() {
const {organizations, providerMaps} = this.props const {organizations, providerMaps} = this.props
return ( return organizations
<div className="page"> ? <ProvidersTable
<div className="page-header"> providerMaps={PROVIDER_MAPS} // TODO: replace with providerMaps prop
<div className="page-header__container"> organizations={organizations}
<div className="page-header__left"> onCreateMap={this.handleCreateMap}
<h1 className="page-header__title">Manage Providers</h1> onUpdateMap={this.handleUpdateMap}
</div> onDeleteMap={this.handleDeleteMap}
</div> />
</div> : <div className="page-spinner" />
<FancyScrollbar className="page-contents">
{organizations
? <ProvidersTable
providerMaps={PROVIDER_MAPS} // TODO: replace with providerMaps prop
organizations={organizations}
onCreateMap={this.handleCreateMap}
onUpdateMap={this.handleUpdateMap}
onDeleteMap={this.handleDeleteMap}
/>
: <div className="page-spinner" />}
</FancyScrollbar>
</div>
)
} }
} }