Render Create Org button & Filter Users dropdown based on Authorization

Signed-off-by: Alex Paxton <thealexpaxton@gmail.com>

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

@@ -1,6 +1,7 @@
 import React, {PropTypes} from 'react'
 
 import SourceIndicator from 'shared/components/SourceIndicator'
+import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
 
 const PageHeader = ({onShowCreateOrgOverlay}) =>
   <div className="page-header">
@@ -10,13 +11,15 @@ const PageHeader = ({onShowCreateOrgOverlay}) =>
       </div>
       <div className="page-header__right">
         <SourceIndicator />
-        <button
-          className="btn btn-primary btn-sm"
-          onClick={onShowCreateOrgOverlay}
-        >
-          <span className="icon plus" />
-          Create Organization
-        </button>
+        <Authorized requiredRole={SUPERADMIN_ROLE}>
+          <button
+            className="btn btn-primary btn-sm"
+            onClick={onShowCreateOrgOverlay}
+          >
+            <span className="icon plus" />
+            Create Organization
+          </button>
+        </Authorized>
       </div>
     </div>
   </div>

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

@@ -1,5 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 
+import Authorized, {SUPERADMIN_ROLE} from 'src/auth/Authorized'
+
 import Dropdown from 'shared/components/Dropdown'
 
 class UsersTableHeader extends Component {
@@ -12,19 +14,28 @@ class UsersTableHeader extends Component {
 
     return (
       <div className="panel-heading u-flex u-ai-center u-jc-space-between">
-        <div className="u-flex u-ai-center">
-          <p className="dropdown-label">Filter Users</p>
-          <Dropdown
-            items={organizations.map(org => ({
-              ...org,
-              text: org.name,
-            }))}
-            selected={organizationName}
-            onChoose={onFilterUsers}
-            buttonSize="btn-md"
-            className="dropdown-220"
-          />
-        </div>
+        <Authorized
+          requiredRole={SUPERADMIN_ROLE}
+          replaceWith={
+            <h2 className="panel-title">
+              {organizationName} Users
+            </h2>
+          }
+        >
+          <div className="u-flex u-ai-center">
+            <p className="dropdown-label">Filter Users</p>
+            <Dropdown
+              items={organizations.map(org => ({
+                ...org,
+                text: org.name,
+              }))}
+              selected={organizationName}
+              onChoose={onFilterUsers}
+              buttonSize="btn-md"
+              className="dropdown-220"
+            />
+          </div>
+        </Authorized>
       </div>
     )
   }

ui/src/admin/containers/AdminChronografPage.js

@@ -21,7 +21,7 @@ class AdminChronografPage extends Component {
 
     this.state = {
       // TODO: pass around organization object instead of just name
-      organizationName: DEFAULT_ORG,
+      organizationName: DEFAULT_ORG, // // TODO: make sure that we take org from server if not superadmin
       selectedUsers: [],
       filteredUsers: this.props.users,
       showCreateOverlay: false,