Restyle Chronograf UsersTable & OrganizationsTable to fit unified page tabbed style

ui/src/admin/components/chronograf/OrganizationsTable.js

@@ -40,54 +40,46 @@ class OrganizationsTable extends Component {
       : 's'}`
 
     return (
-      <div className="container-fluid">
-        <div className="row">
-          <div className="col-xs-12">
-            <div className="panel panel-minimal">
-              <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-                <h2 className="panel-title">
-                  {tableTitle}
-                </h2>
-                <button
-                  className="btn btn-sm btn-primary"
-                  onClick={this.handleClickCreateOrganization}
-                  disabled={isCreatingOrganization}
-                >
-                  <span className="icon plus" /> Create Organization
-                </button>
-              </div>
-              <div className="panel-body">
-                <div className="orgs-table--org-labels">
-                  <div className="orgs-table--id">ID</div>
-                  <div className="orgs-table--name">Name</div>
-                  <div className="orgs-table--default-role">Default Role</div>
-                  <div className="orgs-table--delete" />
-                </div>
-                {isCreatingOrganization
-                  ? <OrganizationsTableRowNew
-                      onCreateOrganization={this.handleCreateOrganization}
-                      onCancelCreateOrganization={
-                        this.handleCancelCreateOrganization
-                      }
-                    />
-                  : null}
-                {organizations.map(
-                  org =>
-                    org.id === DEFAULT_ORG_ID
-                      ? <OrganizationsTableRowDefault
-                          key={uuid.v4()}
-                          organization={org}
-                        />
-                      : <OrganizationsTableRow
-                          key={uuid.v4()}
-                          organization={org}
-                          onDelete={onDeleteOrg}
-                          onRename={onRenameOrg}
-                        />
-                )}
-              </div>
-            </div>
+      <div className="panel panel-default">
+        <div className="panel-heading u-flex u-ai-center u-jc-space-between">
+          <h2 className="panel-title">
+            {tableTitle}
+          </h2>
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={this.handleClickCreateOrganization}
+            disabled={isCreatingOrganization}
+          >
+            <span className="icon plus" /> Create Organization
+          </button>
+        </div>
+        <div className="panel-body">
+          <div className="orgs-table--org-labels">
+            <div className="orgs-table--id">ID</div>
+            <div className="orgs-table--name">Name</div>
+            <div className="orgs-table--default-role">Default Role</div>
+            <div className="orgs-table--delete" />
           </div>
+          {isCreatingOrganization
+            ? <OrganizationsTableRowNew
+                onCreateOrganization={this.handleCreateOrganization}
+                onCancelCreateOrganization={this.handleCancelCreateOrganization}
+              />
+            : null}
+          {organizations.map(
+            org =>
+              org.id === DEFAULT_ORG_ID
+                ? <OrganizationsTableRowDefault
+                    key={uuid.v4()}
+                    organization={org}
+                  />
+                : <OrganizationsTableRow
+                    key={uuid.v4()}
+                    organization={org}
+                    onDelete={onDeleteOrg}
+                    onRename={onRenameOrg}
+                  />
+          )}
         </div>
       </div>
     )

ui/src/admin/components/chronograf/UsersTable.js

@@ -52,7 +52,7 @@ class UsersTable extends Component {
     } = USERS_TABLE
 
     return (
-      <div className="panel panel-minimal">
+      <div className="panel panel-default">
         <UsersTableHeader
           numUsers={users.length}
           onClickCreateUser={this.handleClickCreateUser}

ui/src/admin/containers/OrganizationsPage.js

@@ -6,13 +6,8 @@ import * as adminChronografActionCreators from 'src/admin/actions/chronograf'
 import {publishAutoDismissingNotification} from 'shared/dispatchers'
 
 import OrganizationsTable from 'src/admin/components/chronograf/OrganizationsTable'
-import FancyScrollbar from 'shared/components/FancyScrollbar'
 
 class OrganizationsPage extends Component {
-  constructor(props) {
-    super(props)
-  }
-
   componentDidMount() {
     const {links, actions: {loadOrganizationsAsync}} = this.props
 
@@ -38,25 +33,12 @@ class OrganizationsPage extends Component {
     const {organizations} = this.props
 
     return (
-      <div className="page">
-        <div className="page-header">
-          <div className="page-header__container">
-            <div className="page-header__left">
-              <h1 className="page-header__title">Admin</h1>
-            </div>
-          </div>
-        </div>
-        <FancyScrollbar className="page-contents">
-          {organizations
-            ? <OrganizationsTable
-                organizations={organizations}
-                onCreateOrg={this.handleCreateOrganization}
-                onDeleteOrg={this.handleDeleteOrganization}
-                onRenameOrg={this.handleRenameOrganization}
-              />
-            : <div className="page-spinner" />}
-        </FancyScrollbar>
-      </div>
+      <OrganizationsTable
+        organizations={organizations}
+        onCreateOrg={this.handleCreateOrganization}
+        onDeleteOrg={this.handleDeleteOrganization}
+        onRenameOrg={this.handleRenameOrganization}
+      />
     )
   }
 }