NIFIREG-30 - Add login component, auth guard to login, tenants, buckets, admin, and explorer routes. Also added route for login component.

NIFIREG-20 - Improve page load times.

NIFIREG-15 - Add loading screen.

This closes #58.

Signed-off-by: Bryan Bende <bbende@apache.org>

nifi-registry-web-ui/src/main/locale/messages.es.xlf

@@ -35,46 +35,76 @@
         <note priority="1" from="description">A description of the type of administration options available.</note>
         <note priority="1" from="meaning">Workflow administration tab</note>
        </trans-unit>
+      <trans-unit id="nf-admin-user-management-sidenav-membership-tab-title" datatype="html">
+         <source>Membership</source>
+         <target state="new">afiliación</target>
+        <note priority="1" from="description">View the groups to which this user belongs.</note>
+        <note priority="1" from="meaning">Group membership tab, user management sidenav</note>
+       </trans-unit>
+      <trans-unit id="nf-admin-group-management-sidenav-membership-tab-title" datatype="html">
+         <source>Membership</source>
+         <target state="new">afiliación</target>
+        <note priority="1" from="description">View the users that belong to this group.</note>
+        <note priority="1" from="meaning">User membership tab, group management sidenav</note>
+       </trans-unit>
+      <trans-unit id="nf-admin-user-management-sidenav-policies-tab-title" datatype="html">
+         <source>Policies</source>
+         <target state="new">Políticas</target>
+        <note priority="1" from="description">View the policies grated this user.</note>
+        <note priority="1" from="meaning">User policy tab, user management sidenav</note>
+       </trans-unit>
       <trans-unit id="nf-admin-workflow-create-bucket-button" datatype="html">
          <source>Create</source>
          <target state="new">Crear</target>
-        <note priority="1" from="description">A button for creating a new bucket in the registry.@@nf-admin-workflow-create-bucket-button.</note>
+        <note priority="1" from="description">A button for creating a new bucket in the registry.</note>
         <note priority="1" from="meaning">Create new bucket button</note>
        </trans-unit>
       <trans-unit id="nf-admin-workflow-add-user-button" datatype="html">
          <source>Add</source>
          <target state="new">añadir</target>
-        <note priority="1" from="description">A button for adding a new user in the registry.@@nf-admin-workflow-add-user-button.</note>
+        <note priority="1" from="description">A button for adding a new user in the registry.</note>
         <note priority="1" from="meaning">Add new user button</note>
        </trans-unit>
       <trans-unit id="nf-admin-workflow-cancel-add-user-button" datatype="html">
          <source>Cancel</source>
          <target state="new">Cancelar</target>
-        <note priority="1" from="description">A button for cancelling the creation of a new user in the registry.@@nf-admin-workflow-add-user-button.</note>
+        <note priority="1" from="description">A button for cancelling the creation of a new user in the registry.</note>
         <note priority="1" from="meaning">Cancel creation of new user</note>
        </trans-unit>
+      <trans-unit id="nf-clear-user-login-button" datatype="html">
+         <source>Clear</source>
+         <target state="new">Claro</target>
+        <note priority="1" from="description">A button for clearing the login form.</note>
+        <note priority="1" from="meaning">Clear log in form</note>
+       </trans-unit>
+      <trans-unit id="nf-user-login-button" datatype="html">
+         <source>Log In</source>
+         <target state="new">Iniciar sesión</target>
+        <note priority="1" from="description">A button for attempting to authenticate with the registry.</note>
+        <note priority="1" from="meaning">Log in form</note>
+       </trans-unit>
       <trans-unit id="nf-admin-workflow-create-new-group-button" datatype="html">
          <source>Create</source>
          <target state="new">Crear</target>
-        <note priority="1" from="description">A button for creating a new group in the registry.@@nf-admin-workflow-create-new-group-button.</note>
+        <note priority="1" from="description">A button for creating a new group in the registry.</note>
         <note priority="1" from="meaning">Create new group button</note>
        </trans-unit>
       <trans-unit id="nf-admin-workflow-cancel-create-new-group-button" datatype="html">
          <source>Cancel</source>
          <target state="new">Cancelar</target>
-        <note priority="1" from="description">A button for cancelling the creation of a new group in the registry.@@nf-admin-workflow-cancel-create-new-group-button.</note>
+        <note priority="1" from="description">A button for cancelling the creation of a new group in the registry.</note>
         <note priority="1" from="meaning">Cancel creation of new group</note>
        </trans-unit>
       <trans-unit id="nf-admin-workflow-add-selected-users-to-group-button" datatype="html">
          <source>Add</source>
          <target state="new">añadir</target>
-        <note priority="1" from="description">A button for adding users to an existing group in the registry.@@nf-admin-workflow-create-new-group-button.</note>
+        <note priority="1" from="description">A button for adding users to an existing group in the registry.</note>
         <note priority="1" from="meaning">Add selected users to group button</note>
        </trans-unit>
       <trans-unit id="nf-admin-workflow-cancel-add-selected-users-to-group-button" datatype="html">
          <source>Cancel</source>
          <target state="new">Cancelar</target>
-        <note priority="1" from="description">A button for cancelling the addition of selected users to a group in the registry.@@nf-admin-workflow-cancel-create-new-group-button.</note>
+        <note priority="1" from="description">A button for cancelling the addition of selected users to a group in the registry.</note>
         <note priority="1" from="meaning">Cancel addition of selected users to group</note>
        </trans-unit>
     </body>

nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss

@@ -35,11 +35,13 @@ $grey2: #666666;
 $grey3: #999999;
 $grey4: #CCCCCC;
 $grey5: #EEEEEE;
-$grey6: #F5F5F5; // or #FAFAFA
+$grey6: #F8F9F9; // or #FAFAFA
 $grey7: #DDDDDD;
 $grey8: #CFD3D7;
 $grey9: #b2b8c1;
 $grey10: #dbdee2;
+$grey11: #2C3E44;
+$grey12: #EEEFF0;
 $blue1: #1491C1;
 $blue2: #E7f6Fc;
 $blue3: #A7DFF2;

nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss

@@ -28,6 +28,11 @@
   padding-bottom: 10px;
 }
 
+.help-icon {
+  font-size: 12px;
+  color: $blue1;
+}
+
 .details-header {
   height: 92px;
 }

nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss

@@ -32,7 +32,7 @@ body[fds] input.mat-input-element, body[fds] textarea.mat-input-element {
   border: 1px solid $grey8;
   height: 32px;
   padding: 0px 10px;
-  width: calc(100% - 22px);
+  width: calc(100% - 26px);
 }
 
 body[fds] textarea.mat-input-element {

nifi-registry-web-ui/src/main/platform/core/common/styles/_stepper.scss

@@ -0,0 +1,20 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one or more
+* contributor license agreements.  See the NOTICE file distributed with
+* this work for additional information regarding copyright ownership.
+* The ASF licenses this file to You under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with
+* the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+.td-step-header span {
+  display: none;
+}

nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss

@@ -31,6 +31,7 @@
 @import 'panels';
 @import 'links';
 @import 'sideNav';
+@import 'stepper';
 @import 'tooltips';
 @import 'expansionPanels';
 @import 'menus';

nifi-registry-web-ui/src/main/webapp/WEB-INF/web.xml

@@ -26,6 +26,16 @@
         <url-pattern>/fluid-design-system</url-pattern>
     </servlet-mapping>
 
+    <!-- servlet to map to login page -->
+    <servlet>
+        <servlet-name>Login</servlet-name>
+        <jsp-file>/WEB-INF/pages/index.jsp</jsp-file>
+    </servlet>
+    <servlet-mapping>
+        <servlet-name>Login</servlet-name>
+        <url-pattern>/login/*</url-pattern>
+    </servlet-mapping>
+
     <!-- servlet to map to administration page -->
     <servlet>
         <servlet-name>Administration</servlet-name>

nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html

@@ -17,16 +17,22 @@ limitations under the License.
 
 <div id="nifi-registry-administration-perspective">
     <mat-button-toggle-group name="nifi-registry-administration-perspective" fxLayout="row"
-                            fxLayoutAlign="space-between center" class="tab-toggle-group">
-        <mat-button-toggle [checked]="nfRegistryService.adminPerspective === 'workflow'" value="workflow"
-                           class="uppercase"
-                           routerLink="/nifi-registry/administration/workflow"
-                           i18n="Workflow administration tab|A description of the type of administration options available.@@nf-admin-workflow-tab-title">
+                             fxLayoutAlign="space-between center" class="tab-toggle-group">
+        <mat-button-toggle
+                [disabled]="!nfRegistryService.currentUser.resourcePermissions.buckets.canRead"
+                [matTooltip]="'Manage NiFi Registry buckets.'"
+                [checked]="nfRegistryService.adminPerspective === 'workflow'" value="workflow"
+                class="uppercase"
+                (change)="navigateToAdminPerspective($event)"
+                i18n="Workflow administration tab|A description of the type of administration options available.@@nf-admin-workflow-tab-title">
             Buckets
         </mat-button-toggle>
-        <mat-button-toggle [checked]="nfRegistryService.adminPerspective === 'users'" value="users" class="uppercase"
-                          routerLink="/nifi-registry/administration/users"
-                          i18n="Users administration tab|A description of the type of administration options available.@@nf-admin-users-tab-title">
+        <mat-button-toggle
+                [disabled]="nfRegistryService.currentUser.anonymous || !nfRegistryService.currentUser.resourcePermissions.tenants.canRead"
+                [matTooltip]="getUserTooltip()"
+                [checked]="nfRegistryService.adminPerspective === 'users'" value="users" class="uppercase"
+                (change)="navigateToAdminPerspective($event)"
+                i18n="Users administration tab|A description of the type of administration options available.@@nf-admin-users-tab-title">
             Users
         </mat-button-toggle>
     </mat-button-toggle-group>

nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js

@@ -23,11 +23,11 @@ var ngRouter = require('@angular/router');
  * NfRegistryAdministration constructor.
  *
  * @param nfRegistryService     The nf-registry.service module.
- * @param ActivatedRoute        The angular activated route module.
+ * @param router                The angular router module.
  * @constructor
  */
-function NfRegistryAdministration(nfRegistryService, ActivatedRoute) {
-    this.route = ActivatedRoute;
+function NfRegistryAdministration(nfRegistryService, router) {
+    this.router = router;
     this.nfRegistryService = nfRegistryService;
 };
 
@@ -49,6 +49,33 @@ NfRegistryAdministration.prototype = {
     ngOnDestroy: function () {
         this.nfRegistryService.perspective = '';
         this.nfRegistryService.setBreadcrumbState('out');
+    },
+
+    /**
+     * Navigates to admin perspective.
+     *
+     * @param $event
+     */
+    navigateToAdminPerspective: function($event) {
+        this.router.navigateByUrl('nifi-registry/administration/' + $event.value);
+    },
+
+    /**
+     * Generate the user tab tooltip.
+     *
+     * @returns {*}
+     */
+    getUserTooltip: function() {
+        if(this.nfRegistryService.currentUser.anonymous) {
+            return 'Please configure NiFi Registry security to enable.';
+        }
+        else {
+            if(!this.nfRegistryService.currentUser.resourcePermissions.tenants.canRead) {
+                return 'You do not have permission. Please contact your System Administrator.'
+            } else {
+                return 'Manage NiFi Registry users and groups.'
+            }
+        }
     }
 };
 
@@ -64,7 +91,7 @@ NfRegistryAdministration.annotations = [
 
 NfRegistryAdministration.parameters = [
     NfRegistryService,
-    ngRouter.ActivatedRoute
+    ngRouter.Router
 ];
 
 module.exports = NfRegistryAdministration;

nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.spec.js

@@ -32,9 +32,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -43,6 +42,8 @@ var NfRegistryDropletGridListViewer = require('nifi-registry/components/explorer
 var fdsCore = require('@fluid-design-system/core');
 var ngMoment = require('angular2-moment');
 var rxjs = require('rxjs/Rx');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryAdministration Component', function () {
     var comp;
@@ -66,16 +67,17 @@ describe('NfRegistryAdministration Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/components/administration/user-group/permissions/nf-registry-user-group-permissions.html

@@ -1,28 +0,0 @@
-<!--
-Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<div fxFill>
-    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
-        <span class="md-card-title"><i class="fa fa-users push-right-sm" aria-hidden="true"></i>{{nfRegistryService.group.identity}}</span>
-        <button mat-icon-button (click)="closeSideNav()">
-            <mat-icon color="primary">close</mat-icon>
-        </button>
-    </div>
-    <button id="nf-registry-user-group-permissions-side-nav-container" class="push-right-md" mat-raised-button color="fds-primary"
-            (click)="closeSideNav()">Close
-    </button>
-</div>

nifi-registry-web-ui/src/main/webapp/components/administration/user-group/permissions/nf-registry-user-group-permissions.js

@@ -1,70 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var ngCore = require('@angular/core');
-var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
-var ngRouter = require('@angular/router');
-
-/**
- * NfRegistryUserGroupsPermissions constructor.
- *
- * @param nfRegistryService     The nf-registry.service module.
- * @param Router                The angular router module.
- * @constructor
- */
-function NfRegistryUserGroupsPermissions(nfRegistryService, Router) {
-    this.nfRegistryService = nfRegistryService;
-    this.router = Router;
-};
-
-NfRegistryUserGroupsPermissions.prototype = {
-    constructor: NfRegistryUserGroupsPermissions,
-
-    /**
-     * Initialize the component.
-     */
-    ngOnInit: function () {
-        this.nfRegistryService.sidenav.open();
-    },
-
-    /**
-     * Destroy the component.
-     */
-    ngOnDestroy: function () {
-        this.nfRegistryService.group = {};
-        this.nfRegistryService.sidenav.close();
-    },
-
-    /**
-     * Navigate to administer users for current registry.
-     */
-    closeSideNav: function () {
-        this.router.navigateByUrl('/nifi-registry/administration/users');
-    }
-};
-
-NfRegistryUserGroupsPermissions.annotations = [
-    new ngCore.Component({
-        template: require('./nf-registry-user-group-permissions.html!text')
-    })
-];
-
-NfRegistryUserGroupsPermissions.parameters = [
-    NfRegistryService,
-    ngRouter.Router
-];
-
-module.exports = NfRegistryUserGroupsPermissions;

nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js

@@ -1,69 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var ngCore = require('@angular/core');
-var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
-var ngRouter = require('@angular/router');
-
-/**
- * NfRegistryUserDetails constructor.
- *
- * @param nfRegistryService     The nf-registry.service module.
- * @param Router                The angular router module.
- * @constructor
- */
-function NfRegistryUserDetails(nfRegistryService, Router) {
-    this.nfRegistryService = nfRegistryService;
-    this.router = Router;
-};
-
-NfRegistryUserDetails.prototype = {
-    constructor: NfRegistryUserDetails,
-
-    /**
-     * Initialize the component.
-     */
-    ngOnInit: function () {
-        this.nfRegistryService.sidenav.open();
-    },
-
-    /**
-     * Destroy the component.
-     */
-    ngOnDestroy: function () {
-        this.nfRegistryService.sidenav.close();
-    },
-
-    /**
-     * Navigate to administer users for current registry.
-     */
-    closeSideNav: function () {
-        this.router.navigateByUrl('/nifi-registry/administration/users');
-    }
-};
-
-NfRegistryUserDetails.annotations = [
-    new ngCore.Component({
-        template: require('./nf-registry-user-details.html!text')
-    })
-];
-
-NfRegistryUserDetails.parameters = [
-    NfRegistryService,
-    ngRouter.Router
-];
-
-module.exports = NfRegistryUserDetails;

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.html

@@ -17,15 +17,15 @@ limitations under the License.
 
 <div id="nifi-registry-admin-add-selected-users-to-group-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="md-card-title">Add to group</span>
+        <span class="md-card-title">Add user to groups</span>
         <button mat-icon-button (click)="cancel()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
-    <div class="pad-bottom-md">
+    <div *ngIf="filteredUserGroups.length > 0" class="pad-bottom-md">
         <div id="nifi-registry-users-administration-list-container-column-header" class="td-data-table">
-            <div class="td-data-table-column" (click)="sortUserGroups(column)"
-                 *ngFor="let column of userGroupsColumns"
+            <div class="td-data-table-column" (click)="sortUsers(column)"
+                 *ngFor="let column of nfRegistryService.userGroupsColumns"
                  fxFlex="{{column.width}}">
                 {{column.label}}
                 <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up"
@@ -42,16 +42,17 @@ limitations under the License.
         <div id="nifi-registry-add-selected-users-to-group-list-container">
             <div [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUserGroups"
                  (click)="row.checked = !row.checked;determineAllUserGroupsSelectedState()">
-                <div *ngFor="let column of userGroupsColumns" fxLayout="row"
+                <div *ngFor="let column of nfRegistryService.userGroupsColumns" fxLayout="row"
                      fxLayoutAlign="space-between center" class="td-data-table-row">
-                    <div *ngIf="row.users && row.users.length > 0" class="td-data-table-cell" fxFlex="{{column.width}}">
+                    <div class="td-data-table-cell" fxFlex="{{column.width}}">
                         <div>
                             <i class="fa fa-users push-right-sm" aria-hidden="true"></i>{{column.format ?
                             column.format(row[column.name]) : row[column.name]}}
                         </div>
                     </div>
                     <div class="td-data-table-cell">
-                        <mat-checkbox [(ngModel)]="row.checked" [checked]="row.checked"
+                        <mat-checkbox [(ngModel)]="row.checked"
+                                      [checked]="row.checked"
                                       (change)="determineAllUserGroupsSelectedState()"
                                       (click)="row.checked = !row.checked;determineAllUserGroupsSelectedState()">
                         </mat-checkbox>
@@ -60,13 +61,17 @@ limitations under the License.
             </div>
         </div>
     </div>
+    <div class="mat-padding push-bottom-md" *ngIf="filteredUserGroups.length === 0" layout="row"
+         layout-align="center center">
+        <h3>User belongs to all groups.</h3>
+    </div>
     <div fxLayout="row">
         <span fxFlex></span>
         <button (click)="cancel()" color="fds-regular" mat-raised-button
                 i18n="Cancel addition of selected users to group|A button for cancelling the addition of selected users to a group in the registry.@@nf-admin-workflow-cancel-add-selected-users-to-group-button">
             Cancel
         </button>
-        <button [disabled]="isAddSelectedUsersToSelectedGroupsDisabled" class="push-left-sm" (click)="addSelectedUsersToSelectedGroups()"
+        <button [disabled]="isAddToSelectedGroupsDisabled" class="push-left-sm" (click)="addToSelectedGroups()"
                 color="fds-primary" mat-raised-button
                 i18n="Add selected users to group button|A button for adding users to an existing group in the registry.@@nf-admin-workflow-add-selected-users-to-group-button">
             Add

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js

@@ -24,47 +24,48 @@ var ngMaterial = require('@angular/material');
 var $ = require('jquery');
 
 /**
- * NfRegistryAddSelectedToGroup constructor.
+ * NfRegistryAddUserToGroups constructor.
  *
  * @param nfRegistryApi         The api service.
  * @param tdDataTableService    The covalent data table service module.
  * @param nfRegistryService     The nf-registry.service module.
  * @param matDialogRef          The angular material dialog ref.
  * @param fdsSnackBarService    The FDS snack bar service module.
+ * @param data                  The data passed into this component.
  * @constructor
  */
-function NfRegistryAddSelectedToGroup(nfRegistryApi, tdDataTableService, nfRegistryService, matDialogRef, fdsSnackBarService) {
+function NfRegistryAddUserToGroups(nfRegistryApi, tdDataTableService, nfRegistryService, matDialogRef, fdsSnackBarService, data) {
     this.dataTableService = tdDataTableService;
     this.snackBarService = fdsSnackBarService;
     this.nfRegistryService = nfRegistryService;
     this.nfRegistryApi = nfRegistryApi;
     this.dialogRef = matDialogRef;
-    this.filteredUserGroups = [];
+    this.data = data;
     //make an independent copy of the groups for sorting and selecting within the scope of this component
     this.groups = $.extend(true, [], this.nfRegistryService.groups);
-    this.selectedGroups = [];
-    this.allGroupsSelected = false;
-    this.isAddSelectedUsersToSelectedGroupsDisabled = true;
+    this.filteredUserGroups = [];
+    this.isAddToSelectedGroupsDisabled = true;
     this.userGroupsSearchTerms = [];
-    this.userGroupsColumns = [
-        {
-            name: 'identity',
-            label: 'Display Name',
-            sortable: true,
-            tooltip: 'User name.',
-            width: 100
-        }
-    ];
+    this.allGroupsSelected = false;
 };
 
-NfRegistryAddSelectedToGroup.prototype = {
-    constructor: NfRegistryAddSelectedToGroup,
+NfRegistryAddUserToGroups.prototype = {
+    constructor: NfRegistryAddUserToGroups,
 
     /**
      * Initialize the component.
      */
     ngOnInit: function () {
+        var self = this;
+
+        this.data.user.userGroups.forEach(function (userGroup) {
+            self.groups = self.groups.filter(function (group) {
+                return (group.identifier !== userGroup.identifier) ? true : false
+            });
+        });
+
         this.filterGroups();
+        this.determineAllUserGroupsSelectedState();
     },
 
     /**
@@ -80,17 +81,17 @@ NfRegistryAddSelectedToGroup.prototype = {
         }
         // if `sortBy` is `undefined` then find the first sortable column in `dropletColumns`
         if (sortBy === undefined) {
-            var arrayLength = this.userGroupsColumns.length;
+            var arrayLength = this.nfRegistryService.userGroupsColumns.length;
             for (var i = 0; i < arrayLength; i++) {
-                if (this.userGroupsColumns[i].sortable === true) {
-                    sortBy = this.userGroupsColumns[i].name;
+                if (this.nfRegistryService.userGroupsColumns[i].sortable === true) {
+                    sortBy = this.nfRegistryService.userGroupsColumns[i].name;
                     //only one column can be actively sorted so we reset all to inactive
-                    this.userGroupsColumns.forEach(function (c) {
+                    this.nfRegistryService.userGroupsColumns.forEach(function (c) {
                         c.active = false;
                     });
                     //and set this column as the actively sorted column
-                    this.userGroupsColumns[i].active = true;
-                    this.userGroupsColumns[i].sortOrder = sortOrder;
+                    this.nfRegistryService.userGroupsColumns[i].active = true;
+                    this.nfRegistryService.userGroupsColumns[i].sortOrder = sortOrder;
                     break;
                 }
             }
@@ -133,33 +134,33 @@ NfRegistryAddSelectedToGroup.prototype = {
 
     /**
      * Sets the `checked` property of each of the `filteredUserGroups` to true
-     * and sets the `isAddSelectedUsersToSelectedGroupsDisabled` and the `allGroupsSelected`
+     * and sets the `isAddToSelectedGroupsDisabled` and the `allGroupsSelected`
      * properties accordingly.
      */
     selectAllUserGroups: function () {
         this.filteredUserGroups.forEach(function (c) {
             c.checked = true;
         });
-        this.isAddSelectedUsersToSelectedGroupsDisabled = false;
+        this.isAddToSelectedGroupsDisabled = false;
         this.allGroupsSelected = true;
     },
 
     /**
      * Sets the `checked` property of each group to false
-     * and sets the `isAddSelectedUsersToSelectedGroupsDisabled` and the `allGroupsSelected`
+     * and sets the `isAddToSelectedGroupsDisabled` and the `allGroupsSelected`
      * properties accordingly.
      */
     deselectAllUserGroups: function () {
         this.filteredUserGroups.forEach(function (c) {
             c.checked = false;
         });
-        this.isAddSelectedUsersToSelectedGroupsDisabled = true;
+        this.isAddToSelectedGroupsDisabled = true;
         this.allGroupsSelected = false;
     },
 
     /**
      * Checks of each of the `filteredUserGroups`'s checked property state
-     * and sets the `allBucketsSelected` and `isAddSelectedUsersToSelectedGroupsDisabled`
+     * and sets the `allBucketsSelected` and `isAddToSelectedGroupsDisabled`
      * property accordingly.
      */
     determineAllUserGroupsSelectedState: function () {
@@ -175,38 +176,34 @@ NfRegistryAddSelectedToGroup.prototype = {
         });
 
         if (selected > 0) {
-            this.isAddSelectedUsersToSelectedGroupsDisabled = false;
+            this.isAddToSelectedGroupsDisabled = false;
         } else {
-            this.isAddSelectedUsersToSelectedGroupsDisabled = true;
+            this.isAddToSelectedGroupsDisabled = true;
         }
 
         this.allGroupsSelected = allSelected;
     },
 
     /**
-     * Adds the selected users to each of the selected groups.
+     * Adds users to each of the selected groups.
      */
-    addSelectedUsersToSelectedGroups: function () {
+    addToSelectedGroups: function () {
         var self = this;
-        var selectedUsers = this.nfRegistryService.filteredUsers.filter(function (filteredUser) {
-            return filteredUser.checked;
-        });
-        var groupIds = this.filteredUserGroups.filter(function (filteredUserGroup) {
+        var selectedGroups = this.filteredUserGroups.filter(function (filteredUserGroup) {
             return filteredUserGroup.checked;
         });
-        groupIds.forEach(function (groupId) {
-            self.nfRegistryApi.getUserGroup(groupId.identifier).subscribe(function (group) {
-                self.nfRegistryApi.updateUserGroup(groupId.identifier, groupId.identity, selectedUsers.concat(group.users)).subscribe(function (group) {
-                    self.dialogRef.close();
-                    var snackBarRef = self.snackBarService.openCoaster({
-                        title: 'Success',
-                        message: 'Selected users have been added to the ' + group.identity + ' group.',
-                        verticalPosition: 'bottom',
-                        horizontalPosition: 'right',
-                        icon: 'fa fa-check-circle-o',
-                        color: '#1EB475',
-                        duration: 3000
-                    });
+        selectedGroups.forEach(function (selectedGroup) {
+            selectedGroup.users.push(self.data.user);
+            self.nfRegistryApi.updateUserGroup(selectedGroup.identifier, selectedGroup.identity, selectedGroup.users).subscribe(function (group) {
+                self.dialogRef.close();
+                var snackBarRef = self.snackBarService.openCoaster({
+                    title: 'Success',
+                    message: 'User has been added to the ' + group.identity + ' group.',
+                    verticalPosition: 'bottom',
+                    horizontalPosition: 'right',
+                    icon: 'fa fa-check-circle-o',
+                    color: '#1EB475',
+                    duration: 3000
                 });
             });
         });
@@ -220,18 +217,19 @@ NfRegistryAddSelectedToGroup.prototype = {
     }
 };
 
-NfRegistryAddSelectedToGroup.annotations = [
+NfRegistryAddUserToGroups.annotations = [
     new ngCore.Component({
-        template: require('./nf-registry-add-selected-users-to-group.html!text')
+        template: require('./nf-registry-add-user-to-groups.html!text')
     })
 ];
 
-NfRegistryAddSelectedToGroup.parameters = [
+NfRegistryAddUserToGroups.parameters = [
     NfRegistryApi,
     covalentCore.TdDataTableService,
     NfRegistryService,
     ngMaterial.MatDialogRef,
-    fdsSnackBarsModule.FdsSnackBarService
+    fdsSnackBarsModule.FdsSnackBarService,
+    ngMaterial.MAT_DIALOG_DATA
 ];
 
-module.exports = NfRegistryAddSelectedToGroup;
+module.exports = NfRegistryAddUserToGroups;

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.spec.js

@@ -17,12 +17,12 @@
 
 var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
 var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
-var NfRegistryAddSelectedToGroup = require('nifi-registry/components/administration/users/dialogs/add-selected-users-to-group/nf-registry-add-selected-users-to-group.js');
+var NfRegistryAddUserToGroups = require('nifi-registry/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js');
 var rxjs = require('rxjs/Rx');
 var covalentCore = require('@covalent/core');
 var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
 
-describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function () {
+describe('NfRegistryAddUserToGroups Component isolated unit tests', function () {
     var comp;
     var nfRegistryService;
     var nfRegistryApi;
@@ -32,16 +32,16 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
     beforeEach(function () {
         nfRegistryService = new NfRegistryService();
         // setup the nfRegistryService
-        nfRegistryService.groups = [{identifier: 1, identity: 'Group 1'}];
-        nfRegistryService.filteredUsers = [{identifier: 2, identity: 'User 1'}];
+        nfRegistryService.user = {identifier: 3, identity: 'User 3', userGroups: []};
+        nfRegistryService.groups = [{identifier: 1, identity: 'Group 1', checked: true, users: []}];
 
         nfRegistryApi = new NfRegistryApi();
         snackBarService = new fdsSnackBarsModule.FdsSnackBarService();
         dataTableService = new covalentCore.TdDataTableService();
-        comp = new NfRegistryAddSelectedToGroup(nfRegistryApi, dataTableService, nfRegistryService, {
+        comp = new NfRegistryAddUserToGroups(nfRegistryApi, dataTableService, nfRegistryService, {
             close: function () {
             }
-        }, snackBarService);
+        }, snackBarService, {user: nfRegistryService.user});
 
         // Spy
         spyOn(nfRegistryApi, 'getUserGroup').and.callFake(function () {
@@ -62,19 +62,19 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
         expect(comp).toBeDefined();
     });
 
-    it('should make a call to the api to add selected users to selected groups', function () {
+    it('should make a call to the api to add user to selected groups', function () {
         // select a group
         comp.filteredUserGroups[0].checked = true;
 
         // the function to test
-        comp.addSelectedUsersToSelectedGroups();
+        comp.addToSelectedGroups();
 
         //assertions
         expect(comp.dialogRef.close).toHaveBeenCalled();
         expect(comp.snackBarService.openCoaster).toHaveBeenCalled();
     });
 
-    it('should determine all user groups are selected', function () {
+    it('should determine if all groups are selected', function () {
         // select a group
         comp.filteredUserGroups[0].checked = true;
 
@@ -83,16 +83,19 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
 
         //assertions
         expect(comp.allGroupsSelected).toBe(true);
-        expect(comp.isAddSelectedUsersToSelectedGroupsDisabled).toBe(false);
+        expect(comp.isAddToSelectedGroupsDisabled).toBe(false);
     });
 
-    it('should determine all user groups are not selected', function () {
+    it('should determine if all groups are not selected', function () {
+        // select a group
+        comp.filteredUserGroups[0].checked = false;
+
         // the function to test
         comp.determineAllUserGroupsSelectedState();
 
         //assertions
         expect(comp.allGroupsSelected).toBe(false);
-        expect(comp.isAddSelectedUsersToSelectedGroupsDisabled).toBe(true);
+        expect(comp.isAddToSelectedGroupsDisabled).toBe(true);
     });
 
     it('should select all groups.', function () {
@@ -101,7 +104,7 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
 
         //assertions
         expect(comp.filteredUserGroups[0].checked).toBe(true);
-        expect(comp.isAddSelectedUsersToSelectedGroupsDisabled).toBe(false);
+        expect(comp.isAddToSelectedGroupsDisabled).toBe(false);
         expect(comp.allGroupsSelected).toBe(true);
     });
 
@@ -114,7 +117,7 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
 
         //assertions
         expect(comp.filteredUserGroups[0].checked).toBe(false);
-        expect(comp.isAddSelectedUsersToSelectedGroupsDisabled).toBe(true);
+        expect(comp.isAddToSelectedGroupsDisabled).toBe(true);
         expect(comp.allGroupsSelected).toBe(false);
     });
 
@@ -159,7 +162,7 @@ describe('NfRegistryAddSelectedToGroup Component isolated unit tests', function
         expect(filterGroupsCall.args[1]).toBe('ASC');
     });
 
-    it('should cancel the creation of a new user', function () {
+    it('should cancel the addition of the user to any group', function () {
         // the function to test
         comp.cancel();
 

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-user/nf-registry-add-user.js

@@ -45,7 +45,7 @@ NfRegistryAddUser.prototype = {
      */
     addUser: function (addUserInput) {
         var self = this;
-        this.nfRegistryApi.addUser(null, addUserInput.value).subscribe(function (user) {
+        this.nfRegistryApi.addUser(addUserInput.value).subscribe(function (user) {
             self.nfRegistryService.users.push(user);
             self.nfRegistryService.allUsersAndGroupsSelected = false;
             self.nfRegistryService.filterUsersAndGroups();

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.html

@@ -0,0 +1,80 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="nifi-registry-admin-add-selected-users-to-group-dialog">
+    <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
+        <span class="md-card-title">Add users to group</span>
+        <button mat-icon-button (click)="cancel()">
+            <mat-icon color="primary">close</mat-icon>
+        </button>
+    </div>
+    <div *ngIf="filteredUsers.length > 0" class="pad-bottom-md">
+        <div id="nifi-registry-users-administration-list-container-column-header" class="td-data-table">
+            <div class="td-data-table-column" (click)="sortUsers(column)"
+                 *ngFor="let column of nfRegistryService.userGroupsColumns"
+                 fxFlex="{{column.width}}">
+                {{column.label}}
+                <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up"
+                   aria-hidden="true"></i>
+                <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down"
+                   aria-hidden="true"></i>
+            </div>
+            <div class="td-data-table-column">
+                <mat-checkbox [(ngModel)]="allUsersSelected"
+                              (checked)="allUsersSelected"
+                              (change)="toggleUsersSelectAll()"></mat-checkbox>
+            </div>
+        </div>
+        <div id="nifi-registry-add-selected-users-to-group-list-container">
+            <div [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUsers"
+                 (click)="row.checked = !row.checked;determineAllUsersSelectedState()">
+                <div *ngFor="let column of nfRegistryService.userGroupsColumns" fxLayout="row"
+                     fxLayoutAlign="space-between center" class="td-data-table-row">
+                    <div class="td-data-table-cell" fxFlex="{{column.width}}">
+                        <div>
+                            {{column.format ?
+                            column.format(row[column.name]) : row[column.name]}}
+                        </div>
+                    </div>
+                    <div class="td-data-table-cell">
+                        <mat-checkbox [(ngModel)]="row.checked"
+                                      [checked]="row.checked"
+                                      (change)="determineAllUsersSelectedState()"
+                                      (click)="row.checked = !row.checked;determineAllUsersSelectedState()">
+                        </mat-checkbox>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="mat-padding push-bottom-md" *ngIf="filteredUsers.length === 0" layout="row"
+         layout-align="center center">
+        <h3>All users belong to this group.</h3>
+    </div>
+    <div fxLayout="row">
+        <span fxFlex></span>
+        <button (click)="cancel()" color="fds-regular" mat-raised-button
+                i18n="Cancel addition of selected users to group|A button for cancelling the addition of selected users to a group in the registry.@@nf-admin-workflow-cancel-add-selected-users-to-group-button">
+            Cancel
+        </button>
+        <button [disabled]="isAddSelectedUsersToGroupDisabled" class="push-left-sm" (click)="addSelectedUsersToGroup()"
+                color="fds-primary" mat-raised-button
+                i18n="Add selected users to group button|A button for adding users to an existing group in the registry.@@nf-admin-workflow-add-selected-users-to-group-button">
+            Add
+        </button>
+    </div>
+</div>

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js

@@ -0,0 +1,234 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var covalentCore = require('@covalent/core');
+var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
+var ngCore = require('@angular/core');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var ngMaterial = require('@angular/material');
+var $ = require('jquery');
+
+/**
+ * NfRegistryAddUsersToGroup constructor.
+ *
+ * @param nfRegistryApi         The api service.
+ * @param tdDataTableService    The covalent data table service module.
+ * @param nfRegistryService     The nf-registry.service module.
+ * @param matDialogRef          The angular material dialog ref.
+ * @param fdsSnackBarService    The FDS snack bar service module.
+ * @param data                  The data passed into this component.
+ * @constructor
+ */
+function NfRegistryAddUsersToGroup(nfRegistryApi, tdDataTableService, nfRegistryService, matDialogRef, fdsSnackBarService, data) {
+    this.dataTableService = tdDataTableService;
+    this.snackBarService = fdsSnackBarService;
+    this.nfRegistryService = nfRegistryService;
+    this.nfRegistryApi = nfRegistryApi;
+    this.dialogRef = matDialogRef;
+    this.data = data;
+    //make an independent copy of the users for sorting and selecting within the scope of this component
+    this.users = $.extend(true, [], this.nfRegistryService.users);
+    this.filteredUsers = [];
+    this.isAddSelectedUsersToGroupDisabled = true;
+    this.usersSearchTerms = [];
+    this.allUsersSelected = false;
+};
+
+NfRegistryAddUsersToGroup.prototype = {
+    constructor: NfRegistryAddUsersToGroup,
+
+    /**
+     * Initialize the component.
+     */
+    ngOnInit: function () {
+        var self = this;
+
+        this.data.group.users.forEach(function (groupUser) {
+            self.users = self.users.filter(function (user) {
+                return (user.identifier !== groupUser.identifier) ? true : false
+            });
+        });
+
+        this.filterUsers();
+        this.determineAllUsersSelectedState();
+    },
+
+    /**
+     * Filter users.
+     *
+     * @param {string} [sortBy]       The column name to sort `userGroupsColumns` by.
+     * @param {string} [sortOrder]    The order. Either 'ASC' or 'DES'
+     */
+    filterUsers: function (sortBy, sortOrder) {
+        // if `sortOrder` is `undefined` then use 'ASC'
+        if (sortOrder === undefined) {
+            sortOrder = 'ASC'
+        }
+        // if `sortBy` is `undefined` then find the first sortable column in `dropletColumns`
+        if (sortBy === undefined) {
+            var arrayLength = this.nfRegistryService.userGroupsColumns.length;
+            for (var i = 0; i < arrayLength; i++) {
+                if (this.nfRegistryService.userGroupsColumns[i].sortable === true) {
+                    sortBy = this.nfRegistryService.userGroupsColumns[i].name;
+                    //only one column can be actively sorted so we reset all to inactive
+                    this.nfRegistryService.userGroupsColumns.forEach(function (c) {
+                        c.active = false;
+                    });
+                    //and set this column as the actively sorted column
+                    this.nfRegistryService.userGroupsColumns[i].active = true;
+                    this.nfRegistryService.userGroupsColumns[i].sortOrder = sortOrder;
+                    break;
+                }
+            }
+        }
+
+        var newUsersData = this.users;
+
+        for (var i = 0; i < this.usersSearchTerms.length; i++) {
+            newUsersData = this.nfRegistryService.filterData(newUsersData, this.usersSearchTerms[i], true);
+        }
+
+        newUsersData = this.dataTableService.sortData(newUsersData, sortBy, sortOrder);
+        this.filteredUsers = newUsersData;
+    },
+
+    /**
+     * Sort `filteredUsers` by `column`.
+     *
+     * @param column    The column to sort by.
+     */
+    sortUsers: function (column) {
+        if (column.sortable) {
+            var sortBy = column.name;
+            var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+            this.filterUsers(sortBy, sortOrder);
+        }
+    },
+
+    /**
+     * Checks the `allUsersSelected` property state and either selects
+     * or deselects each of the `filteredUsers`.
+     */
+    toggleUsersSelectAll: function () {
+        if (this.allUsersSelected) {
+            this.selectAllUsers();
+        } else {
+            this.deselectAllUsers();
+        }
+    },
+
+    /**
+     * Sets the `checked` property of each of the `filteredUsers` to true
+     * and sets the `isAddSelectedUsersToGroupDisabled` and the `allUsersSelected`
+     * properties accordingly.
+     */
+    selectAllUsers: function () {
+        this.filteredUsers.forEach(function (c) {
+            c.checked = true;
+        });
+        this.isAddSelectedUsersToGroupDisabled = false;
+        this.allUsersSelected = true;
+    },
+
+    /**
+     * Sets the `checked` property of each group to false
+     * and sets the `isAddSelectedUsersToGroupDisabled` and the `allUsersSelected`
+     * properties accordingly.
+     */
+    deselectAllUsers: function () {
+        this.filteredUsers.forEach(function (c) {
+            c.checked = false;
+        });
+        this.isAddSelectedUsersToGroupDisabled = true;
+        this.allUsersSelected = false;
+    },
+
+    /**
+     * Checks of each of the `filteredUsers`'s checked property state
+     * and sets the `allBucketsSelected` and `isAddSelectedUsersToGroupDisabled`
+     * property accordingly.
+     */
+    determineAllUsersSelectedState: function () {
+        var selected = 0;
+        var allSelected = true;
+        this.filteredUsers.forEach(function (c) {
+            if (c.checked) {
+                selected++;
+            }
+            if (c.checked === undefined || c.checked === false) {
+                allSelected = false;
+            }
+        });
+
+        if (selected > 0) {
+            this.isAddSelectedUsersToGroupDisabled = false;
+        } else {
+            this.isAddSelectedUsersToGroupDisabled = true;
+        }
+
+        this.allUsersSelected = allSelected;
+    },
+
+    /**
+     * Adds each of the selected users to this group.
+     */
+    addSelectedUsersToGroup: function () {
+        var self = this;
+        this.filteredUsers.filter(function (filteredUser) {
+            if(filteredUser.checked) {
+                self.data.group.users.push(filteredUser);
+            }
+        });
+        this.nfRegistryApi.updateUserGroup(self.data.group.identifier, self.data.group.identity, self.data.group.users).subscribe(function (group) {
+            self.dialogRef.close();
+            var snackBarRef = self.snackBarService.openCoaster({
+                title: 'Success',
+                message: 'Selected users have been added to the ' + self.data.group.identity + ' group.',
+                verticalPosition: 'bottom',
+                horizontalPosition: 'right',
+                icon: 'fa fa-check-circle-o',
+                color: '#1EB475',
+                duration: 3000
+            });
+        });
+    },
+
+    /**
+     * Cancel adding selected users to groups and close the dialog.
+     */
+    cancel: function () {
+        this.dialogRef.close();
+    }
+};
+
+NfRegistryAddUsersToGroup.annotations = [
+    new ngCore.Component({
+        template: require('./nf-registry-add-users-to-group.html!text')
+    })
+];
+
+NfRegistryAddUsersToGroup.parameters = [
+    NfRegistryApi,
+    covalentCore.TdDataTableService,
+    NfRegistryService,
+    ngMaterial.MatDialogRef,
+    fdsSnackBarsModule.FdsSnackBarService,
+    ngMaterial.MAT_DIALOG_DATA
+];
+
+module.exports = NfRegistryAddUsersToGroup;

nifi-registry-web-ui/src/main/webapp/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.spec.js

@@ -0,0 +1,170 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the 'License'); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var NfRegistryAddUsersToGroup = require('nifi-registry/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js');
+var rxjs = require('rxjs/Rx');
+var covalentCore = require('@covalent/core');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+
+describe('NfRegistryAddUsersToGroup Component isolated unit tests', function () {
+    var comp;
+    var nfRegistryService;
+    var nfRegistryApi;
+    var snackBarService;
+    var dataTableService;
+
+    beforeEach(function () {
+        nfRegistryService = new NfRegistryService();
+        // setup the nfRegistryService
+        nfRegistryService.group = {identifier: 1, identity: 'Group 1', users: []};
+        nfRegistryService.users = [{identifier: 2, identity: 'User 1', checked: true}];
+
+        nfRegistryApi = new NfRegistryApi();
+        snackBarService = new fdsSnackBarsModule.FdsSnackBarService();
+        dataTableService = new covalentCore.TdDataTableService();
+        comp = new NfRegistryAddUsersToGroup(nfRegistryApi, dataTableService, nfRegistryService, {
+            close: function () {
+            }
+        }, snackBarService, {group: nfRegistryService.group});
+
+        // Spy
+        spyOn(nfRegistryApi, 'updateUserGroup').and.callFake(function () {
+        }).and.returnValue(rxjs.Observable.of({identifier: 1, identity: 'Group 1'}));
+        spyOn(comp.dialogRef, 'close');
+        spyOn(comp.snackBarService, 'openCoaster');
+        spyOn(comp, 'filterUsers').and.callThrough();
+
+        // initialize the component
+        comp.ngOnInit();
+
+        //assertions
+        expect(comp.filterUsers).toHaveBeenCalled();
+        expect(comp.filteredUsers[0].identity).toEqual('User 1');
+        expect(comp.filteredUsers.length).toBe(1);
+        expect(comp).toBeDefined();
+    });
+
+    it('should make a call to the api to add selected users to the group', function () {
+        // select a group
+        comp.filteredUsers[0].checked = true;
+
+        // the function to test
+        comp.addSelectedUsersToGroup();
+
+        //assertions
+        expect(comp.dialogRef.close).toHaveBeenCalled();
+        expect(comp.snackBarService.openCoaster).toHaveBeenCalled();
+    });
+
+    it('should determine if all users are selected', function () {
+        // select a group
+        comp.filteredUsers[0].checked = true;
+
+        // the function to test
+        comp.determineAllUsersSelectedState();
+
+        //assertions
+        expect(comp.allUsersSelected).toBe(true);
+        expect(comp.isAddSelectedUsersToGroupDisabled).toBe(false);
+    });
+
+    it('should determine all user groups are not selected', function () {
+        // select a group
+        comp.filteredUsers[0].checked = false;
+
+        // the function to test
+        comp.determineAllUsersSelectedState();
+
+        //assertions
+        expect(comp.allUsersSelected).toBe(false);
+        expect(comp.isAddSelectedUsersToGroupDisabled).toBe(true);
+    });
+
+    it('should select all groups.', function () {
+        // The function to test
+        comp.selectAllUsers();
+
+        //assertions
+        expect(comp.filteredUsers[0].checked).toBe(true);
+        expect(comp.isAddSelectedUsersToGroupDisabled).toBe(false);
+        expect(comp.allUsersSelected).toBe(true);
+    });
+
+    it('should deselect all groups.', function () {
+        // select a group
+        comp.filteredUsers[0].checked = true;
+
+        // The function to test
+        comp.deselectAllUsers();
+
+        //assertions
+        expect(comp.filteredUsers[0].checked).toBe(false);
+        expect(comp.isAddSelectedUsersToGroupDisabled).toBe(true);
+        expect(comp.allUsersSelected).toBe(false);
+    });
+
+    it('should toggle all groups `checked` properties to true.', function () {
+        //Spy
+        spyOn(comp, 'selectAllUsers').and.callFake(function () {
+        });
+
+        comp.allUsersSelected = true;
+
+        // The function to test
+        comp.toggleUsersSelectAll();
+
+        //assertions
+        expect(comp.selectAllUsers).toHaveBeenCalled();
+    });
+
+    it('should toggle all groups `checked` properties to false.', function () {
+        //Spy
+        spyOn(comp, 'deselectAllUsers').and.callFake(function () {
+        });
+
+        comp.allUsersSelected = false;
+
+        // The function to test
+        comp.toggleUsersSelectAll();
+
+        //assertions
+        expect(comp.deselectAllUsers).toHaveBeenCalled();
+    });
+
+    it('should sort `groups` by `column`', function () {
+        // object to be updated by the test
+        var column = {name: 'name', label: 'Group Name', sortable: true};
+
+        // The function to test
+        comp.sortUsers(column);
+
+        //assertions
+        var filterUsersCall = comp.filterUsers.calls.mostRecent();
+        expect(filterUsersCall.args[0]).toBe('name');
+        expect(filterUsersCall.args[1]).toBe('ASC');
+    });
+
+    it('should cancel the creation of a new user', function () {
+        // the function to test
+        comp.cancel();
+
+        //assertions
+        expect(comp.dialogRef.close).toHaveBeenCalled();
+    });
+});

nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html

@@ -40,10 +40,6 @@ limitations under the License.
                     (click)="createNewGroup()">
                 <span>Create new group</span>
             </button>
-            <button mat-menu-item [disabled]="nfRegistryService.getSelectedGroups().length > 0 || nfRegistryService.getSelectedUsers().length === 0 || nfRegistryService.groups.length === 0"
-                    (click)="addSelectedUsersToGroup()">
-                <span>Add selected users to group</span>
-            </button>
         </mat-menu>
         <div id="nifi-registry-users-administration-list-container-column-header" fxLayout="row"
              fxLayoutAlign="space-between center" class="td-data-table">
@@ -75,9 +71,9 @@ limitations under the License.
                     </div>
                     <div class="td-data-table-cell">
                         <div>
-                            <div *ngIf="userGroupsActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
+                            <div *ngIf="nfRegistryService.userGroupsActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
                                 <button (click)="row.checked = !row.checked;nfRegistryService.executeGroupAction(action, row)"
-                                        *ngFor="let action of userGroupsActions"
+                                        *ngFor="let action of nfRegistryService.userGroupsActions"
                                         matTooltip="{{action.tooltip}}" mat-icon-button color="accent"
                                         [disabled]="action.disabled ? '' : null">
                                     <i class="{{action.icon}}" aria-hidden="true"></i>
@@ -86,14 +82,14 @@ limitations under the License.
                                               (change)="nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"
                                               (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>
                             </div>
-                            <div *ngIf="userGroupsActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
+                            <div *ngIf="nfRegistryService.userGroupsActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
                                 <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button
                                         [matMenuTriggerFor]="userTableActionMenu">
                                     <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                 </button>
                                 <mat-menu #userTableActionMenu="matMenu" [overlapTrigger]="false">
                                     <button (click)="nfRegistryService.executeGroupAction(action, row)"
-                                            *ngFor="let action of userGroupsActions"
+                                            *ngFor="let action of nfRegistryService.userGroupsActions"
                                             matTooltip="{{action.tooltip}}" mat-menu-item
                                             [disabled]="action.disabled ? '' : null"
                                             (click)="nfRegistryService.sidenav.toggle()">
@@ -106,7 +102,7 @@ limitations under the License.
                                               (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>
                             </div>
                         </div>
-                        <div *ngIf="!userGroupsActions" fxLayout="row" fxLayoutAlign="end center">
+                        <div *ngIf="!nfRegistryService.userGroupsActions" fxLayout="row" fxLayoutAlign="end center">
                             <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
                                           (change)="nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"
                                           (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>
@@ -124,9 +120,9 @@ limitations under the License.
                     </div>
                     <div class="td-data-table-cell">
                         <div>
-                            <div *ngIf="usersActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
+                            <div *ngIf="nfRegistryService.usersActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
                                 <button (click)="row.checked = !row.checked;nfRegistryService.executeUserAction(action, row)"
-                                        *ngFor="let action of usersActions"
+                                        *ngFor="let action of nfRegistryService.usersActions"
                                         matTooltip="{{action.tooltip}}" mat-icon-button color="accent"
                                         [disabled]="action.disabled ? '' : null">
                                     <i class="{{action.icon}}" aria-hidden="true"></i>
@@ -135,14 +131,14 @@ limitations under the License.
                                               (change)="nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"
                                               (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>
                             </div>
-                            <div *ngIf="usersActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
+                            <div *ngIf="nfRegistryService.usersActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
                                 <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button
                                         [matMenuTriggerFor]="userTableActionMenu">
                                     <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                                 </button>
                                 <mat-menu #userTableActionMenu="matMenu" [overlapTrigger]="false">
                                     <button (click)="nfRegistryService.executeUserAction(action, row)"
-                                            *ngFor="let action of usersActions"
+                                            *ngFor="let action of nfRegistryService.usersActions"
                                             matTooltip="{{action.tooltip}}" mat-menu-item
                                             [disabled]="action.disabled ? '' : null"
                                             (click)="nfRegistryService.sidenav.toggle()">
@@ -155,7 +151,7 @@ limitations under the License.
                                               (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>
                             </div>
                         </div>
-                        <div *ngIf="!usersActions" fxLayout="row" fxLayoutAlign="end center">
+                        <div *ngIf="!nfRegistryService.usersActions" fxLayout="row" fxLayoutAlign="end center">
                             <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
                                           (change)="nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"
                                           (click)="row.checked = !row.checked;nfRegistryService.determineAllUsersAndGroupsSelectedState(row)"></mat-checkbox>

nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js

@@ -25,7 +25,6 @@ var ngMaterial = require('@angular/material');
 var fdsDialogsModule = require('@fluid-design-system/dialogs');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
 var NfRegistryCreateNewGroup = require('nifi-registry/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js');
-var NfRegistryAddSelectedUsersToGroup = require('nifi-registry/components/administration/users/dialogs/add-selected-users-to-group/nf-registry-add-selected-users-to-group.js');
 
 /**
  * NfRegistryUsersAdministration constructor.
@@ -45,26 +44,6 @@ function NfRegistryUsersAdministration(nfRegistryApi, nfStorage, nfRegistryServi
     this.nfRegistryApi = nfRegistryApi;
     this.dialogService = fdsDialogService;
     this.dialog = matDialog;
-    this.usersActions = [{
-        name: 'permissions',
-        icon: 'fa fa-pencil',
-        tooltip: 'Manage User Policies',
-        type: 'sidenav'
-    }, {
-        name: 'Delete',
-        icon: 'fa fa-trash',
-        tooltip: 'Delete User'
-    }];
-    this.userGroupsActions = [{
-        name: 'permissions',
-        icon: 'fa fa-pencil',
-        tooltip: 'Manage User Group Policies',
-        type: 'sidenav'
-    }, {
-        name: 'Delete',
-        icon: 'fa fa-trash',
-        tooltip: 'Delete User Group'
-    }];
 };
 
 NfRegistryUsersAdministration.prototype = {
@@ -76,27 +55,22 @@ NfRegistryUsersAdministration.prototype = {
     ngOnInit: function () {
         var self = this;
         this.nfRegistryService.inProgress = true;
-        // attempt kerberos authentication
-        this.nfRegistryApi.ticketExchange().subscribe(function (jwt) {
-            self.nfRegistryService.loadCurrentUser().subscribe(function (currentUser) {
-                self.route.params
-                    .switchMap(function (params) {
-                        self.nfRegistryService.adminPerspective = 'users';
-                        return new rxjs.Observable.forkJoin(
-                            self.nfRegistryApi.getUsers(),
-                            self.nfRegistryApi.getUserGroups()
-                        );
-                    })
-                    .subscribe(function (response) {
-                        var users = response[0];
-                        var groups = response[1];
-                        self.nfRegistryService.users = users;
-                        self.nfRegistryService.groups = groups;
-                        self.nfRegistryService.filterUsersAndGroups();
-                        self.nfRegistryService.inProgress = false;
-                    });
+        this.route.params
+            .switchMap(function (params) {
+                self.nfRegistryService.adminPerspective = 'users';
+                return new rxjs.Observable.forkJoin(
+                    self.nfRegistryApi.getUsers(),
+                    self.nfRegistryApi.getUserGroups()
+                );
+            })
+            .subscribe(function (response) {
+                var users = response[0];
+                var groups = response[1];
+                self.nfRegistryService.users = users;
+                self.nfRegistryService.groups = groups;
+                self.nfRegistryService.filterUsersAndGroups();
+                self.nfRegistryService.inProgress = false;
             });
-        });
     },
 
     /**
@@ -121,23 +95,6 @@ NfRegistryUsersAdministration.prototype = {
      */
     createNewGroup: function () {
         this.dialog.open(NfRegistryCreateNewGroup);
-    },
-
-    /**
-     * Opens the add selected users to groups dialog.
-     */
-    addSelectedUsersToGroup: function () {
-        if (this.nfRegistryService.getSelectedGroups().length === 0) {
-            // ok...only users are currently selected...go ahead and open the dialog to select groups
-            this.dialog.open(NfRegistryAddSelectedUsersToGroup);
-        } else {
-            self.dialogService.openConfirm({
-                title: 'Error: Groups may not be added to a group. Please deselect any groups and try again',
-                message: error.message,
-                acceptButton: 'Ok',
-                acceptButtonColor: 'fds-warn'
-            });
-        }
     }
 };
 

nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-adminstration.spec.js

@@ -30,9 +30,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryCreateBucket = require('nifi-registry/components/administration/workflow/dialogs/nf-registry-create-bucket.js');
@@ -46,6 +45,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryUsersAdministration Component', function () {
     var comp;
@@ -70,9 +71,8 @@ describe('NfRegistryUsersAdministration Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
@@ -80,7 +80,9 @@ describe('NfRegistryUsersAdministration Component', function () {
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             entryComponents: [
                 NfRegistryCreateBucket
@@ -173,17 +175,6 @@ describe('NfRegistryUsersAdministration Component', function () {
         expect(comp.dialog.open).toHaveBeenCalled();
     });
 
-    it('should open a dialog to add selected users to groups', function () {
-        spyOn(comp.dialog, 'open')
-        fixture.detectChanges();
-
-        // the function to test
-        comp.addSelectedUsersToGroup();
-
-        //assertions
-        expect(comp.dialog.open).toHaveBeenCalled();
-    });
-
     it('should destroy the component', ngCoreTesting.fakeAsync(function () {
         fixture.detectChanges();
         // wait for async getBucket call

nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.html

@@ -0,0 +1,154 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div fxFill>
+    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
+        <span class="md-card-title">{{nfRegistryService.group.identity}}</span>
+        <button mat-icon-button (click)="closeSideNav()">
+            <mat-icon color="primary">close</mat-icon>
+        </button>
+    </div>
+    <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayoutAlign="start center">
+        <mat-input-container flex>
+            <input #groupnameInput matInput [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite" placeholder="Identity/Group Name" value="{{nfRegistryService.group.identity}}"
+                   [(ngModel)]="_groupname">
+        </mat-input-container>
+        <button [disabled]="nfRegistryService.group.identity === _groupname"
+                (click)="updateGroupName(groupnameInput.value)"
+                class="input-button"
+                color="fds-regular"
+                mat-raised-button>
+            Save
+        </button>
+    </div>
+    <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayout="column" fxLayoutAlign="space-between start">
+        <div>
+            <span class="header">Special Privileges
+                <i matTooltip="Allows a group to manage NiFi Registry users and groups, buckets, proxies, and policies."
+                   class="pad-left-sm fa fa-question-circle-o help-icon"></i>
+            </span>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [checked]="nfRegistryService.group.resourcePermissions.buckets.canRead && nfRegistryService.group.resourcePermissions.buckets.canWrite && nfRegistryService.group.resourcePermissions.buckets.canDelete" (change)="toggleGroupManageBucketsPrivileges($event)">
+            <span class="description">Can manage buckets</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.buckets.canRead" (change)="toggleGroupManageBucketsPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.buckets.canWrite" (change)="toggleGroupManageBucketsPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.buckets.canDelete" (change)="toggleGroupManageBucketsPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [checked]="nfRegistryService.group.resourcePermissions.tenants.canRead && nfRegistryService.group.resourcePermissions.tenants.canWrite && nfRegistryService.group.resourcePermissions.tenants.canDelete" (change)="toggleGroupManageTenantsPrivileges($event)">
+            <span class="description">Can manage users</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.tenants.canRead" (change)="toggleGroupManageTenantsPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.tenants.canWrite" (change)="toggleGroupManageTenantsPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.tenants.canDelete" (change)="toggleGroupManageTenantsPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [checked]="nfRegistryService.group.resourcePermissions.policies.canRead && nfRegistryService.group.resourcePermissions.policies.canWrite && nfRegistryService.group.resourcePermissions.policies.canDelete" (change)="toggleGroupManagePoliciesPrivileges($event)">
+            <span class="description">Can manage policies</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.policies.canRead" (change)="toggleGroupManagePoliciesPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.policies.canWrite" (change)="toggleGroupManagePoliciesPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [(checked)]="nfRegistryService.group.resourcePermissions.policies.canDelete" (change)="toggleGroupManagePoliciesPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite" [checked]="nfRegistryService.group.resourcePermissions.proxy.canWrite" (change)="toggleGroupManageProxyPrivileges($event)">
+            <span class="description">Can proxy user requests</span>
+        </mat-checkbox>
+    </div>
+    <mat-button-toggle-group name="nifi-registry-manage-group-perspective" class="pad-left-md tab-toggle-group">
+        <mat-button-toggle [checked]="manageGroupPerspective === 'membership'"
+                           value="membership"
+                           class="uppercase"
+                           (change)="manageGroupPerspective = 'membership'"
+                           i18n="User membership tab, group management sidenav|View the users that belong to this group.@@nf-admin-group-management-sidenav-membership-tab-title">
+            Membership
+        </mat-button-toggle>
+    </mat-button-toggle-group>
+    <div *ngIf="manageGroupPerspective === 'membership'">
+        <div *ngIf="nfRegistryService.group.users" fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
+            <div flex fxLayout="row" fxLayoutAlign="space-between center">
+                <span class="md-card-title">Membership ({{nfRegistryService.group.users.length}})</span>
+                <button color="fds-secondary"
+                        [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite"
+                        mat-raised-button
+                        (click)="addUsersToGroup()">
+                    Add Users
+                </button>
+            </div>
+            <div id="nifi-registry-group-membership-list-container-column-header" fxLayout="row"
+                 fxLayoutAlign="space-between center" class="td-data-table">
+                <div class="td-data-table-column" (click)="sortUsers(column)"
+                     *ngFor="let column of nfRegistryService.userGroupsColumns"
+                     fxFlex="{{column.width}}">
+                    {{column.label}}
+                    <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up"
+                       aria-hidden="true"></i>
+                    <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down"
+                       aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="nifi-registry-group-membership-list-container">
+                <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row"
+                     [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUsers"
+                     (click)="row.checked = !row.checked">
+                    <div class="td-data-table-cell" *ngFor="let column of nfRegistryService.userGroupsColumns"
+                         fxFlex="{{column.width}}">
+                        <div matTooltip="{{column.format ? column.format(row[column.name]) : row[column.name]}}">
+                            {{column.format ? column.format(row[column.name]) : row[column.name]}}
+                        </div>
+                    </div>
+                    <div class="td-data-table-cell">
+                        <div>
+                            <button (click)="removeUserFromGroup(row);row.checked = !row.checked;"
+                                    matTooltip="'Remove user from group'" mat-icon-button color="accent"
+                                    *ngIf="nfRegistryService.currentUser.resourcePermissions.tenants.canWrite">
+                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mat-padding" *ngIf="nfRegistryService.group.users.length === 0" layout="row"
+                 layout-align="center center">
+                <h3>This group does not have any users yet.</h3>
+            </div>
+        </div>
+    </div>
+    <button id="nf-registry-user-permissions-side-nav-container" class="push-right-md" mat-raised-button
+            color="fds-primary"
+            (click)="closeSideNav()">Close
+    </button>
+</div>

nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js

@@ -0,0 +1,577 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var covalentCore = require('@covalent/core');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+var ngCore = require('@angular/core');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var ngRouter = require('@angular/router');
+var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
+var ngMaterial = require('@angular/material');
+var NfRegistryAddUsersToGroup = require('nifi-registry/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js');
+
+/**
+ * NfRegistryManageGroup constructor.
+ *
+ * @param nfRegistryApi         The api service.
+ * @param nfRegistryService     The nf-registry.service module.
+ * @param tdDataTableService    The covalent data table service module.
+ * @param fdsDialogService      The FDS dialog service.
+ * @param fdsSnackBarService    The FDS snack bar service module.
+ * @param activatedRoute        The angular route module.
+ * @param router                The angular router module.
+ * @param matDialog             The angular material dialog module.
+ * @constructor
+ */
+function NfRegistryManageGroup(nfRegistryApi, nfRegistryService, tdDataTableService, fdsDialogService, fdsSnackBarService, activatedRoute, router, matDialog) {
+    this.filteredUsers = [];
+    this.usersSearchTerms = [];
+    this._groupname = '';
+    this.manageGroupPerspective = 'membership';
+
+    // Services
+    this.nfRegistryService = nfRegistryService;
+    this.route = activatedRoute;
+    this.router = router;
+    this.dialog = matDialog;
+    this.nfRegistryApi = nfRegistryApi;
+    this.dialogService = fdsDialogService;
+    this.snackBarService = fdsSnackBarService;
+    this.dataTableService = tdDataTableService;
+};
+
+NfRegistryManageGroup.prototype = {
+    constructor: NfRegistryManageGroup,
+
+    /**
+     * Initialize the component.
+     */
+    ngOnInit: function () {
+        var self = this;
+        this.nfRegistryService.sidenav.open();
+
+        // subscribe to the route params
+        self.route.params
+            .switchMap(function (params) {
+                return self.nfRegistryApi.getUserGroup(params['groupId']);
+            })
+            .subscribe(function (response) {
+                self.nfRegistryService.group = response;
+                self._groupname = response.identity;
+                self.filterUsers();
+            });
+    },
+
+    /**
+     * Destroy the component.
+     */
+    ngOnDestroy: function () {
+        this.nfRegistryService.sidenav.close();
+    },
+
+    /**
+     * Navigate to administer users for current registry.
+     */
+    closeSideNav: function () {
+        this.router.navigateByUrl('/nifi-registry/administration/users');
+    },
+
+    /**
+     * Toggles the manage bucket privileges for the group.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleGroupManageBucketsPrivileges: function ($event, policyAction) {
+        var self = this;
+        if ($event.checked) {
+            for (var resource in this.nfRegistryService.BUCKETS_PRIVS) {
+                if (this.nfRegistryService.BUCKETS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.BUCKETS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, self.nfRegistryService.group.users, []).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges created and granted!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.userGroups.push(self.nfRegistryService.group);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges updated!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current group from the administrator resources
+            for (var resource in this.nfRegistryService.BUCKETS_PRIVS) {
+                if (this.nfRegistryService.BUCKETS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.BUCKETS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current group and update it
+                                    policy.userGroups = policy.userGroups.filter(function (group) {
+                                        return (group.identifier !== self.nfRegistryService.group.identifier) ? true : false;
+                                    });
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                self.nfRegistryService.group = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage tenants privileges for the group.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleGroupManageTenantsPrivileges: function ($event, policyAction) {
+        var self = this;
+        if ($event.checked) {
+            for (var resource in this.nfRegistryService.TENANTS_PRIVS) {
+                if (this.nfRegistryService.TENANTS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.TENANTS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, self.nfRegistryService.group.users, []).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges created and granted!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.userGroups.push(self.nfRegistryService.group);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges updated!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current group from the administrator resources
+            for (var resource in this.nfRegistryService.TENANTS_PRIVS) {
+                if (this.nfRegistryService.TENANTS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.TENANTS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current group and update it
+                                    policy.userGroups = policy.userGroups.filter(function (group) {
+                                        return (group.identifier !== self.nfRegistryService.group.identifier) ? true : false;
+                                    });
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                self.nfRegistryService.group = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage policies privileges for the group.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleGroupManagePoliciesPrivileges: function ($event, policyAction) {
+        var self = this;
+        if ($event.checked) {
+            for (var resource in this.nfRegistryService.POLICIES_PRIVS) {
+                if (this.nfRegistryService.POLICIES_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.POLICIES_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, self.nfRegistryService.group.users, []).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges created and granted!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.userGroups.push(self.nfRegistryService.group);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges updated!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current group from the administrator resources
+            for (var resource in this.nfRegistryService.POLICIES_PRIVS) {
+                if (this.nfRegistryService.POLICIES_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.POLICIES_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current group and update it
+                                    policy.userGroups = policy.userGroups.filter(function (group) {
+                                        return (group.identifier !== self.nfRegistryService.group.identifier) ? true : false;
+                                    });
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                self.nfRegistryService.group = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage proxy privileges for the group.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleGroupManageProxyPrivileges: function ($event, policyAction) {
+        var self = this;
+        if ($event.checked) {
+            for (var resource in this.nfRegistryService.PROXY_PRIVS) {
+                if (this.nfRegistryService.PROXY_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.PROXY_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, self.nfRegistryService.group.users, []).subscribe(
+                                        function (response) {
+                                            // can manage proxy privileges created and granted!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.userGroups.push(self.nfRegistryService.group);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage proxy privileges updated!!!...now update the view
+                                            response.userGroups.forEach(function (group) {
+                                                if (group.identifier === self.nfRegistryService.group.identifier) {
+                                                    self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.group = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current group from the administrator resources
+            for (var resource in this.nfRegistryService.PROXY_PRIVS) {
+                if (this.nfRegistryService.PROXY_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.PROXY_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current group and update it
+                                    policy.userGroups = policy.userGroups.filter(function (group) {
+                                        return (group.identifier !== self.nfRegistryService.group.identifier) ? true : false;
+                                    });
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage proxy privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier).subscribe(function(response) {
+                                                self.nfRegistryService.group = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Opens a modal dialog UX enabling the addition of users to this group.
+     */
+    addUsersToGroup: function () {
+        var self = this;
+        this.dialog.open(NfRegistryAddUsersToGroup, {
+            data: {
+                group: this.nfRegistryService.group
+            }
+        }).afterClosed().subscribe(function () {
+            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier)
+                .subscribe(function (response) {
+                    self.nfRegistryService.group = response;
+                    self._groupname = response.identity;
+                    self.filterUsers();
+                });
+        });
+    },
+
+    /**
+     * Filter users.
+     *
+     * @param {string} [sortBy]       The column name to sort `userGroupsColumns` by.
+     * @param {string} [sortOrder]    The order. Either 'ASC' or 'DES'
+     */
+    filterUsers: function (sortBy, sortOrder) {
+        // if `sortOrder` is `undefined` then use 'ASC'
+        if (sortOrder === undefined) {
+            sortOrder = 'ASC'
+        }
+        // if `sortBy` is `undefined` then find the first sortable column in `userGroupsColumns`
+        if (sortBy === undefined) {
+            var arrayLength = this.nfRegistryService.userGroupsColumns.length;
+            for (var i = 0; i < arrayLength; i++) {
+                if (this.nfRegistryService.userGroupsColumns[i].sortable === true) {
+                    sortBy = this.nfRegistryService.userGroupsColumns[i].name;
+                    //only one column can be actively sorted so we reset all to inactive
+                    this.nfRegistryService.userGroupsColumns.forEach(function (c) {
+                        c.active = false;
+                    });
+                    //and set this column as the actively sorted column
+                    this.nfRegistryService.userGroupsColumns[i].active = true;
+                    this.nfRegistryService.userGroupsColumns[i].sortOrder = sortOrder;
+                    break;
+                }
+            }
+        }
+
+        var newUsersData = this.nfRegistryService.group.users || [];
+
+        for (var i = 0; i < this.usersSearchTerms.length; i++) {
+            newUsersData = this.filterData(newUsersData, this.usersSearchTerms[i], true);
+        }
+
+        newUsersData = this.dataTableService.sortData(newUsersData, sortBy, sortOrder);
+        this.filteredUsers = newUsersData;
+    },
+
+    /**
+     * Sort `users` by `column`.
+     *
+     * @param column    The column to sort by.
+     */
+    sortUsers: function (column) {
+        if (column.sortable) {
+            var sortBy = column.name;
+            var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+            this.filterUsers(sortBy, sortOrder);
+
+            //only one column can be actively sorted so we reset all to inactive
+            this.nfRegistryService.userGroupsColumns.forEach(function (c) {
+                c.active = false;
+            });
+            //and set this column as the actively sorted column
+            column.active = true;
+        }
+    },
+
+    /**
+     * Remove user from group.
+     *
+     * @param user
+     */
+    removeUserFromGroup: function (user) {
+        var self = this;
+        var users = this.nfRegistryService.group.users.filter(function (u) {
+            if (u.identifier !== user.identifier) {
+                return u;
+            }
+        });
+
+        this.nfRegistryApi.updateUserGroup(this.nfRegistryService.group.identifier, this.nfRegistryService.group.identity, users).subscribe(function (response) {
+            self.nfRegistryApi.getUserGroup(self.nfRegistryService.group.identifier)
+                .subscribe(function (response) {
+                    self.nfRegistryService.group = response;
+                    self.filterUsers();
+                });
+            var snackBarRef = self.snackBarService.openCoaster({
+                title: 'Success',
+                message: 'The user has been removed from the ' + this.nfRegistryService.group.identity + ' group.',
+                verticalPosition: 'bottom',
+                horizontalPosition: 'right',
+                icon: 'fa fa-check-circle-o',
+                color: '#1EB475',
+                duration: 3000
+            });
+        });
+    },
+
+    /**
+     * Update group name.
+     *
+     * @param groupname
+     */
+    updateGroupName: function (groupname) {
+        var self = this;
+        this.nfRegistryApi.updateUserGroup(this.nfRegistryService.group.identifier, groupname, this.nfRegistryService.group.users).subscribe(function (response) {
+            if (!response.status || response.status === 200) {
+                self.nfRegistryService.group = response;
+                self.nfRegistryService.groups.filter(function (group) {
+                    if (self.nfRegistryService.group.identifier === group.identifier) {
+                        group.identity = response.identity;
+                    }
+                });
+                var snackBarRef = self.snackBarService.openCoaster({
+                    title: 'Success',
+                    message: 'This group name has been updated.',
+                    verticalPosition: 'bottom',
+                    horizontalPosition: 'right',
+                    icon: 'fa fa-check-circle-o',
+                    color: '#1EB475',
+                    duration: 3000
+                });
+            } else if (response.status === 409) {
+                self._groupname = self.nfRegistryService.group.identity;
+                self.dialogService.openConfirm({
+                    title: 'Error',
+                    message: 'This group already exists. Please enter a different identity/group name.',
+                    acceptButton: 'Ok',
+                    acceptButtonColor: 'fds-warn'
+                });
+            }
+        });
+    }
+};
+
+NfRegistryManageGroup.annotations = [
+    new ngCore.Component({
+        template: require('./nf-registry-manage-group.html!text')
+    })
+];
+
+NfRegistryManageGroup.parameters = [
+    NfRegistryApi,
+    NfRegistryService,
+    covalentCore.TdDataTableService,
+    fdsDialogsModule.FdsDialogService,
+    fdsSnackBarsModule.FdsSnackBarService,
+    ngRouter.ActivatedRoute,
+    ngRouter.Router,
+    ngMaterial.MatDialog
+];
+
+module.exports = NfRegistryManageGroup;

nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.html

@@ -0,0 +1,158 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div fxFill>
+    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
+        <span class="md-card-title">{{nfRegistryService.user.identity}}</span>
+        <button mat-icon-button (click)="closeSideNav()">
+            <mat-icon color="primary">close</mat-icon>
+        </button>
+    </div>
+    <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayoutAlign="start center">
+        <mat-input-container flex>
+            <input #usernameInput
+                   matInput
+                   [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)"
+                   placeholder="Identity/User Name"
+                   value="{{nfRegistryService.user.identity}}"
+                   [(ngModel)]="_username">
+        </mat-input-container>
+        <button [disabled]="nfRegistryService.user.identity === _username || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)"
+                (click)="updateUserName(usernameInput.value)"
+                class="input-button"
+                color="fds-regular"
+                mat-raised-button>
+            Save
+        </button>
+    </div>
+    <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayout="column" fxLayoutAlign="space-between start">
+        <div>
+            <span class="header">Special Privileges
+                <i matTooltip="Allows a user to manage NiFi Registry users and groups, buckets, proxies, and policies."
+                          class="pad-left-sm fa fa-question-circle-o help-icon"></i>
+            </span>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [checked]="nfRegistryService.user.resourcePermissions.buckets.canRead && nfRegistryService.user.resourcePermissions.buckets.canWrite && nfRegistryService.user.resourcePermissions.buckets.canDelete" (change)="toggleUserManageBucketsPrivileges($event)">
+            <span class="description">Can manage buckets</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.buckets.canRead" (change)="toggleUserManageBucketsPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.buckets.canWrite" (change)="toggleUserManageBucketsPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.buckets.canDelete" (change)="toggleUserManageBucketsPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [checked]="nfRegistryService.user.resourcePermissions.tenants.canRead && nfRegistryService.user.resourcePermissions.tenants.canWrite && nfRegistryService.user.resourcePermissions.tenants.canDelete" (change)="toggleUserManageTenantsPrivileges($event)">
+            <span class="description">Can manage users</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.tenants.canRead" (change)="toggleUserManageTenantsPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.tenants.canWrite" (change)="toggleUserManageTenantsPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.tenants.canDelete" (change)="toggleUserManageTenantsPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [checked]="nfRegistryService.user.resourcePermissions.policies.canRead && nfRegistryService.user.resourcePermissions.policies.canWrite && nfRegistryService.user.resourcePermissions.policies.canDelete" (change)="toggleUserManagePoliciesPrivileges($event)">
+            <span class="description">Can manage policies</span>
+        </mat-checkbox>
+        <div flex fxLayout="row" fxLayoutAlign="space-around center">
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.policies.canRead" (change)="toggleUserManagePoliciesPrivileges($event, 'read')">
+                <span class="description">Read</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.policies.canWrite" (change)="toggleUserManagePoliciesPrivileges($event, 'write')">
+                <span class="description">Write</span>
+            </mat-checkbox>
+            <mat-checkbox class="pad-left-md" [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [(checked)]="nfRegistryService.user.resourcePermissions.policies.canDelete" (change)="toggleUserManagePoliciesPrivileges($event, 'delete')">
+                <span class="description">Delete</span>
+            </mat-checkbox>
+        </div>
+        <mat-checkbox [disabled]="!nfRegistryService.currentUser.resourcePermissions.policies.canWrite || (nfRegistryService.currentUser.identity === nfRegistryService.user.identity)" [checked]="nfRegistryService.user.resourcePermissions.proxy.canWrite" (change)="toggleUserManageProxyPrivileges($event)">
+            <span class="description">Can proxy user requests</span>
+        </mat-checkbox>
+    </div>
+    <mat-button-toggle-group name="nifi-registry-manage-user-perspective" class="pad-left-md tab-toggle-group">
+        <mat-button-toggle [checked]="manageUserPerspective === 'membership'"
+                           value="membership"
+                           class="uppercase"
+                           (change)="manageUserPerspective = 'membership'"
+                           i18n="Group membership tab, user management sidenav|View the groups to which this user belongs.@@nf-admin-user-management-sidenav-membership-tab-title">
+            Membership
+        </mat-button-toggle>
+    </mat-button-toggle-group>
+    <div *ngIf="manageUserPerspective === 'membership'">
+        <div *ngIf="nfRegistryService.user.userGroups" fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
+            <div flex fxLayout="row" fxLayoutAlign="space-between center">
+                <span class="md-card-title">Membership ({{nfRegistryService.user.userGroups.length}})</span>
+                <button color="fds-secondary"
+                        [disabled]="!nfRegistryService.currentUser.resourcePermissions.tenants.canWrite"
+                        mat-raised-button
+                        (click)="addUserToGroups()">
+                    Add To Group
+                </button>
+            </div>
+            <div id="nifi-registry-user-membership-list-container-column-header" fxLayout="row"
+                 fxLayoutAlign="space-between center" class="td-data-table">
+                <div class="td-data-table-column" (click)="sortGroups(column)"
+                     *ngFor="let column of nfRegistryService.userGroupsColumns"
+                     fxFlex="{{column.width}}">
+                    {{column.label}}
+                    <i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up"
+                       aria-hidden="true"></i>
+                    <i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down"
+                       aria-hidden="true"></i>
+                </div>
+            </div>
+            <div id="nifi-registry-user-membership-list-container">
+                <div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row"
+                     [ngClass]="{'selected' : row.checked}" *ngFor="let row of filteredUserGroups"
+                     (click)="row.checked = !row.checked">
+                    <div class="td-data-table-cell" *ngFor="let column of nfRegistryService.userGroupsColumns"
+                         fxFlex="{{column.width}}">
+                        <div matTooltip="{{column.format ? column.format(row[column.name]) : row[column.name]}}">
+                            <i class="fa fa-users push-right-sm" aria-hidden="true"></i>{{column.format ? column.format(row[column.name]) : row[column.name]}}
+                        </div>
+                    </div>
+                    <div class="td-data-table-cell">
+                        <div>
+                            <button (click)="removeUserFromGroup(row);row.checked = !row.checked;"
+                                    matTooltip="'Remove user from group'" mat-icon-button color="accent"
+                                    *ngIf="nfRegistryService.currentUser.resourcePermissions.tenants.canWrite">
+                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="mat-padding" *ngIf="nfRegistryService.user.userGroups.length === 0" layout="row"
+                 layout-align="center center">
+                <h3>This user does not belong to any groups yet.</h3>
+            </div>
+        </div>
+    </div>
+    <button id="nf-registry-user-permissions-side-nav-container" class="push-right-md" mat-raised-button
+            color="fds-primary"
+            (click)="closeSideNav()">Close
+    </button>
+</div>

nifi-registry-web-ui/src/main/webapp/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js

@@ -0,0 +1,577 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var covalentCore = require('@covalent/core');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
+var ngCore = require('@angular/core');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var ngRouter = require('@angular/router');
+var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
+var ngMaterial = require('@angular/material');
+var NfRegistryAddUserToGroups = require('nifi-registry/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js');
+
+/**
+ * NfRegistryManageUser constructor.
+ *
+ * @param nfRegistryApi         The api service.
+ * @param nfRegistryService     The nf-registry.service module.
+ * @param tdDataTableService    The covalent data table service module.
+ * @param fdsDialogService      The FDS dialog service.
+ * @param fdsSnackBarService    The FDS snack bar service module.
+ * @param activatedRoute        The angular route module.
+ * @param router                The angular router module.
+ * @param matDialog             The angular material dialog module.
+ * @constructor
+ */
+function NfRegistryManageUser(nfRegistryApi, nfRegistryService, tdDataTableService, fdsDialogService, fdsSnackBarService, activatedRoute, router, matDialog) {
+    this.filteredUserGroups = [];
+    this.userGroupsSearchTerms = [];
+    this._username = '';
+    this.manageUserPerspective = 'membership';
+
+    // Services
+    this.nfRegistryService = nfRegistryService;
+    this.route = activatedRoute;
+    this.router = router;
+    this.dialog = matDialog;
+    this.nfRegistryApi = nfRegistryApi;
+    this.dialogService = fdsDialogService;
+    this.snackBarService = fdsSnackBarService;
+    this.dataTableService = tdDataTableService;
+};
+
+NfRegistryManageUser.prototype = {
+    constructor: NfRegistryManageUser,
+
+    /**
+     * Initialize the component.
+     */
+    ngOnInit: function () {
+        var self = this;
+        this.nfRegistryService.sidenav.open();
+
+        // subscribe to the route params
+        self.route.params
+            .switchMap(function (params) {
+                return self.nfRegistryApi.getUser(params['userId']);
+            })
+            .subscribe(function (response) {
+                self.nfRegistryService.user = response;
+                self._username = response.identity;
+                self.filterGroups();
+            });
+    },
+
+    /**
+     * Destroy the component.
+     */
+    ngOnDestroy: function () {
+        this.nfRegistryService.sidenav.close();
+    },
+
+    /**
+     * Navigate to administer users for current registry.
+     */
+    closeSideNav: function () {
+        this.router.navigateByUrl('/nifi-registry/administration/users');
+    },
+
+    /**
+     * Toggles the manage bucket privileges for the user.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleUserManageBucketsPrivileges: function ($event, policyAction) {
+        var self = this;
+        if($event.checked) {
+            for (var resource in this.nfRegistryService.BUCKETS_PRIVS) {
+                if (this.nfRegistryService.BUCKETS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.BUCKETS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, [self.nfRegistryService.user], []).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges created and granted!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.users.push(self.nfRegistryService.user);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges updated!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function(response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current user from the /buckets resources
+            for (var resource in this.nfRegistryService.BUCKETS_PRIVS) {
+                if (this.nfRegistryService.BUCKETS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.BUCKETS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current user and update it
+                                    policy.users = policy.users.filter(function (user) {
+                                        return (user.identifier !== self.nfRegistryService.user.identifier) ? true : false;
+                                    })
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage buckets privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function(response) {
+                                                self.nfRegistryService.user = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage tenants privileges for the user.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleUserManageTenantsPrivileges: function ($event, policyAction) {
+        var self = this;
+        if($event.checked) {
+            for (var resource in this.nfRegistryService.TENANTS_PRIVS) {
+                if (this.nfRegistryService.TENANTS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.TENANTS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, [self.nfRegistryService.user], []).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges created and granted!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.users.push(self.nfRegistryService.user);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges updated!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current user from the administrator resources
+            for (var resource in this.nfRegistryService.TENANTS_PRIVS) {
+                if (this.nfRegistryService.TENANTS_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.TENANTS_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current user and update it
+                                    policy.users = policy.users.filter(function (user) {
+                                        return (user.identifier !== self.nfRegistryService.user.identifier) ? true : false;
+                                    })
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage tenants privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                self.nfRegistryService.user = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage policies privileges for the user.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleUserManagePoliciesPrivileges: function ($event, policyAction) {
+        var self = this;
+        if($event.checked) {
+            for (var resource in this.nfRegistryService.POLICIES_PRIVS) {
+                if (this.nfRegistryService.POLICIES_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.POLICIES_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, [self.nfRegistryService.user], []).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges created and granted!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.users.push(self.nfRegistryService.user);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges updated!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current user from the administrator resources
+            for (var resource in this.nfRegistryService.POLICIES_PRIVS) {
+                if (this.nfRegistryService.POLICIES_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.POLICIES_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current user and update it
+                                    policy.users = policy.users.filter(function (user) {
+                                        return (user.identifier !== self.nfRegistryService.user.identifier) ? true : false;
+                                    })
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage policies privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                self.nfRegistryService.user = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Toggles the manage proxy privileges for the user.
+     *
+     * @param $event
+     * @param policyAction      The action to be toggled
+     */
+    toggleUserManageProxyPrivileges: function ($event, policyAction) {
+        var self = this;
+        if($event.checked) {
+            for (var resource in this.nfRegistryService.PROXY_PRIVS) {
+                if (this.nfRegistryService.PROXY_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.PROXY_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist, let's create it
+                                    self.nfRegistryApi.postPolicyActionResource(action, resource, [self.nfRegistryService.user], []).subscribe(
+                                        function (response) {
+                                            // can manage proxy privileges created and granted!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                } else {
+                                    // resource exists, let's update it
+                                    policy.users.push(self.nfRegistryService.user);
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // can manage proxy privileges updated!!!...now update the view
+                                            response.users.forEach(function (user) {
+                                                if (user.identifier === self.nfRegistryService.user.identifier) {
+                                                    self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                        self.nfRegistryService.user = response;
+                                                    });
+                                                }
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+        } else {
+            // Remove the current user from the administrator resources
+            for (var resource in this.nfRegistryService.PROXY_PRIVS) {
+                if (this.nfRegistryService.PROXY_PRIVS.hasOwnProperty(resource)) {
+                    this.nfRegistryService.PROXY_PRIVS[resource].forEach(function (action) {
+                        if (!policyAction || (action === policyAction)) {
+                            self.nfRegistryApi.getPolicyActionResource(action, resource).subscribe(function (policy) {
+                                if (policy.status && policy.status === 409) {
+                                    // resource does NOT exist
+                                } else {
+                                    // resource exists, let's filter out the current user and update it
+                                    policy.users = policy.users.filter(function (user) {
+                                        return (user.identifier !== self.nfRegistryService.user.identifier) ? true : false;
+                                    })
+                                    self.nfRegistryApi.putPolicyActionResource(policy.identifier, policy.action,
+                                        policy.resource, policy.users, policy.userGroups).subscribe(
+                                        function (response) {
+                                            // administrator privileges updated!!!...now update the view
+                                            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier).subscribe(function (response) {
+                                                self.nfRegistryService.user = response;
+                                            });
+                                        });
+                                }
+                            });
+                        }
+                    });
+                }
+            }
+
+        }
+    },
+
+    /**
+     * Opens a modal dialog UX enabling the addition of this user to multiple groups.
+     */
+    addUserToGroups: function () {
+        var self = this;
+        this.dialog.open(NfRegistryAddUserToGroups, {
+            data: {
+                user: this.nfRegistryService.user
+            }
+        }).afterClosed().subscribe(function () {
+            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier)
+                .subscribe(function (response) {
+                    self.nfRegistryService.user = response;
+                    self._username = response.identity;
+                    self.filterGroups();
+                });
+        });
+    },
+
+    /**
+     * Filter groups.
+     *
+     * @param {string} [sortBy]       The column name to sort `userGroupsColumns` by.
+     * @param {string} [sortOrder]    The order. Either 'ASC' or 'DES'
+     */
+    filterGroups: function (sortBy, sortOrder) {
+        // if `sortOrder` is `undefined` then use 'ASC'
+        if (sortOrder === undefined) {
+            sortOrder = 'ASC'
+        }
+        // if `sortBy` is `undefined` then find the first sortable column in `userGroupsColumns`
+        if (sortBy === undefined) {
+            var arrayLength = this.nfRegistryService.userGroupsColumns.length;
+            for (var i = 0; i < arrayLength; i++) {
+                if (this.nfRegistryService.userGroupsColumns[i].sortable === true) {
+                    sortBy = this.nfRegistryService.userGroupsColumns[i].name;
+                    //only one column can be actively sorted so we reset all to inactive
+                    this.nfRegistryService.userGroupsColumns.forEach(function (c) {
+                        c.active = false;
+                    });
+                    //and set this column as the actively sorted column
+                    this.nfRegistryService.userGroupsColumns[i].active = true;
+                    this.nfRegistryService.userGroupsColumns[i].sortOrder = sortOrder;
+                    break;
+                }
+            }
+        }
+
+        var newUserGroupsData = this.nfRegistryService.user.userGroups || [];
+
+        for (var i = 0; i < this.userGroupsSearchTerms.length; i++) {
+            newUserGroupsData = this.filterData(newUserGroupsData, this.userGroupsSearchTerms[i], true);
+        }
+
+        newUserGroupsData = this.dataTableService.sortData(newUserGroupsData, sortBy, sortOrder);
+        this.filteredUserGroups = newUserGroupsData;
+    },
+
+    /**
+     * Sort `groups` by `column`.
+     *
+     * @param column    The column to sort by.
+     */
+    sortGroups: function (column) {
+        if (column.sortable) {
+            var sortBy = column.name;
+            var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+            this.filterGroups(sortBy, sortOrder);
+
+            //only one column can be actively sorted so we reset all to inactive
+            this.nfRegistryService.userGroupsColumns.forEach(function (c) {
+                c.active = false;
+            });
+            //and set this column as the actively sorted column
+            column.active = true;
+        }
+    },
+
+    /**
+     * Remove user from group.
+     *
+     * @param group
+     */
+    removeUserFromGroup: function (group) {
+        var self = this;
+        var userGroups = this.nfRegistryService.user.userGroups.filter(function (userGroup) {
+            if (userGroup.identifier !== group.identifier) {
+                return userGroup;
+            }
+        });
+
+        this.nfRegistryApi.updateUserGroup(group.identifier, group.identity, userGroups).subscribe(function (response) {
+            self.nfRegistryApi.getUser(self.nfRegistryService.user.identifier)
+                .subscribe(function (response) {
+                    self.nfRegistryService.user = response;
+                    self.filterGroups();
+                });
+            var snackBarRef = self.snackBarService.openCoaster({
+                title: 'Success',
+                message: 'This user has been removed from the ' + group.identity + ' group.',
+                verticalPosition: 'bottom',
+                horizontalPosition: 'right',
+                icon: 'fa fa-check-circle-o',
+                color: '#1EB475',
+                duration: 3000
+            });
+        });
+    },
+
+    /**
+     * Update user name.
+     *
+     * @param username
+     */
+    updateUserName: function (username) {
+        var self = this;
+        this.nfRegistryApi.updateUser(this.nfRegistryService.user.identifier, username).subscribe(function (response) {
+            if(!response.status || response.status === 200) {
+                self.nfRegistryService.user = response;
+                self.nfRegistryService.users.filter(function(user) {
+                    if (self.nfRegistryService.user.identifier === user.identifier){
+                        user.identity = response.identity;
+                    }
+                });
+                var snackBarRef = self.snackBarService.openCoaster({
+                    title: 'Success',
+                    message: 'This user name has been updated.',
+                    verticalPosition: 'bottom',
+                    horizontalPosition: 'right',
+                    icon: 'fa fa-check-circle-o',
+                    color: '#1EB475',
+                    duration: 3000
+                });
+            } else if (response.status === 409) {
+                self._username = self.nfRegistryService.user.identity;
+                self.dialogService.openConfirm({
+                    title: 'Error',
+                    message: 'This user already exists. Please enter a different identity/user name.',
+                    acceptButton: 'Ok',
+                    acceptButtonColor: 'fds-warn'
+                });
+            }
+        });
+    }
+};
+
+NfRegistryManageUser.annotations = [
+    new ngCore.Component({
+        template: require('./nf-registry-manage-user.html!text')
+    })
+];
+
+NfRegistryManageUser.parameters = [
+    NfRegistryApi,
+    NfRegistryService,
+    covalentCore.TdDataTableService,
+    fdsDialogsModule.FdsDialogService,
+    fdsSnackBarsModule.FdsSnackBarService,
+    ngRouter.ActivatedRoute,
+    ngRouter.Router,
+    ngMaterial.MatDialog
+];
+
+module.exports = NfRegistryManageUser;

nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html

@@ -16,12 +16,98 @@ limitations under the License.
 -->
 
 <div fxFill>
-    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-md pad-bottom-md pad-left-sm pad-right-sm">
+    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
         <span *ngIf="nfRegistryService.bucket.identifier" class="md-card-title">{{nfRegistryService.bucket.name}}</span>
         <button mat-icon-button (click)="closeSideNav()">
             <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
+    <div class="pad-bottom-md pad-left-md pad-right-md" flex fxLayoutAlign="start center">
+        <mat-input-container floatPlaceholder="always" flex>
+            <input matInput placeholder="Bucket Name" value="{{nfRegistryService.bucket.name}}">
+        </mat-input-container>
+        <button class="input-button" color="fds-regular" mat-raised-button>
+            Save
+        </button>
+    </div>
+    <!--<div id="nifi-registry-bucket-permissions-container" class="mat-elevation-z5">-->
+        <!--<div fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">-->
+            <!--<span class="md-card-title">Policies ({{nfRegistryService.bucket.authorizedActions.length}})</span>-->
+            <!--<div id="nifi-registry-bucket-permissions-list-container-column-header" fxLayout="row"-->
+                 <!--fxLayoutAlign="space-between center" class="td-data-table">-->
+                <!--<div class="td-data-table-column" (click)="nfRegistryService.sortBuckets(column)"-->
+                     <!--*ngFor="let column of nfRegistryService.bucketColumns"-->
+                     <!--fxFlex="{{column.width}}">-->
+                    <!--{{column.label}}-->
+                    <!--<i *ngIf="column.active && column.sortable && column.sortOrder === 'ASC'" class="fa fa-caret-up"-->
+                       <!--aria-hidden="true"></i>-->
+                    <!--<i *ngIf="column.active && column.sortable && column.sortOrder === 'DESC'" class="fa fa-caret-down"-->
+                       <!--aria-hidden="true"></i>-->
+                <!--</div>-->
+                <!--<div class="td-data-table-column">-->
+                    <!--<div fxLayout="row" fxLayoutAlign="end center">-->
+                        <!--<mat-checkbox class="pad-left-sm" [(ngModel)]="nfRegistryService.allBucketsSelected"-->
+                                      <!--(checked)="nfRegistryService.allBucketsSelected"-->
+                                      <!--(change)="nfRegistryService.toggleBucketsSelectAll()"></mat-checkbox>-->
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div id="nifi-registry-bucket-permissions-list-container">-->
+                <!--<div fxLayout="row" fxLayoutAlign="space-between center" class="td-data-table-row"-->
+                     <!--[ngClass]="{'selected' : row.checked}" *ngFor="let row of nfRegistryService.filteredBuckets"-->
+                     <!--(click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()">-->
+                    <!--<div class="td-data-table-cell" *ngFor="let column of nfRegistryService.bucketColumns"-->
+                         <!--fxFlex="{{column.width}}">-->
+                        <!--<div matTooltip="{{column.format ? column.format(row[column.name]) : row[column.name]}}">-->
+                            <!--{{column.format ? column.format(row[column.name]) : row[column.name]}}-->
+                        <!--</div>-->
+                    <!--</div>-->
+                    <!--<div class="td-data-table-cell">-->
+                        <!--<div>-->
+                            <!--<div *ngIf="bucketActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">-->
+                                <!--<button (click)="nfRegistryService.executeBucketAction(action, row);row.checked = !row.checked;"-->
+                                        <!--*ngFor="let action of bucketActions"-->
+                                        <!--matTooltip="{{action.tooltip}}" mat-icon-button color="accent"-->
+                                        <!--[disabled]="action.disabled ? '' : null">-->
+                                    <!--<i class="{{action.icon}}" aria-hidden="true"></i>-->
+                                <!--</button>-->
+                                <!--<mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"-->
+                                              <!--(change)="nfRegistryService.determineAllBucketsSelectedState()"-->
+                                              <!--(click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>-->
+                            <!--</div>-->
+                            <!--<div *ngIf="bucketActions.length > 4" fxLayout="row" fxLayoutAlign="end center">-->
+                                <!--<button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button-->
+                                        <!--[matMenuTriggerFor]="bucketTableActionMenu">-->
+                                    <!--<i class="fa fa-ellipsis-h" aria-hidden="true"></i>-->
+                                <!--</button>-->
+                                <!--<mat-menu #bucketTableActionMenu="matMenu" [overlapTrigger]="false">-->
+                                    <!--<button (click)="nfRegistryService.executeBucketAction(action, row);row.checked = !row.checked;"-->
+                                            <!--*ngFor="let action of bucketActions"-->
+                                            <!--matTooltip="{{action.tooltip}}" mat-menu-item-->
+                                            <!--[disabled]="action.disabled ? '' : null">-->
+                                        <!--<i class="{{action.icon}}" aria-hidden="true"></i>-->
+                                        <!--<span>{{action.name}}</span>-->
+                                    <!--</button>-->
+                                <!--</mat-menu>-->
+                                <!--<mat-checkbox [(ngModel)]="row.checked" [checked]="row.checked"-->
+                                              <!--(change)="nfRegistryService.determineAllBucketsSelectedState()"-->
+                                              <!--(click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>-->
+                            <!--</div>-->
+                        <!--</div>-->
+                        <!--<div *ngIf="!bucketActions" fxLayout="row" fxLayoutAlign="end center">-->
+                            <!--<mat-checkbox [(ngModel)]="row.checked" [checked]="row.checked"-->
+                                          <!--(change)="nfRegistryService.determineAllBucketsSelectedState(row)"-->
+                                          <!--(click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>-->
+                        <!--</div>-->
+                    <!--</div>-->
+                <!--</div>-->
+            <!--</div>-->
+            <!--<div class="mat-padding" *ngIf="nfRegistryService.filteredBuckets.length === 0" layout="row"-->
+                 <!--layout-align="center center">-->
+                <!--<h3>No results to display.</h3>-->
+            <!--</div>-->
+        <!--</div>-->
+    <!--</div>-->
     <button id="nf-registry-workflow-bucket-permissions-side-nav-container" mat-raised-button color="fds-primary"
             (click)="closeSideNav()">Close
     </button>

nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.html

@@ -65,9 +65,9 @@ limitations under the License.
                 </div>
                 <div class="td-data-table-cell">
                     <div>
-                        <div *ngIf="bucketActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
+                        <div *ngIf="nfRegistryService.bucketActions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
                             <button (click)="nfRegistryService.executeBucketAction(action, row);row.checked = !row.checked;"
-                                    *ngFor="let action of bucketActions"
+                                    *ngFor="let action of nfRegistryService.bucketActions"
                                     matTooltip="{{action.tooltip}}" mat-icon-button color="accent"
                                     [disabled]="action.disabled ? '' : null">
                                 <i class="{{action.icon}}" aria-hidden="true"></i>
@@ -76,14 +76,14 @@ limitations under the License.
                                           (change)="nfRegistryService.determineAllBucketsSelectedState()"
                                           (click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>
                         </div>
-                        <div *ngIf="bucketActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
+                        <div *ngIf="nfRegistryService.bucketActions.length > 4" fxLayout="row" fxLayoutAlign="end center">
                             <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button
                                     [matMenuTriggerFor]="bucketTableActionMenu">
                                 <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                             </button>
                             <mat-menu #bucketTableActionMenu="matMenu" [overlapTrigger]="false">
                                 <button (click)="nfRegistryService.executeBucketAction(action, row);row.checked = !row.checked;"
-                                        *ngFor="let action of bucketActions"
+                                        *ngFor="let action of nfRegistryService.bucketActions"
                                         matTooltip="{{action.tooltip}}" mat-menu-item
                                         [disabled]="action.disabled ? '' : null">
                                     <i class="{{action.icon}}" aria-hidden="true"></i>
@@ -95,7 +95,7 @@ limitations under the License.
                                           (click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>
                         </div>
                     </div>
-                    <div *ngIf="!bucketActions" fxLayout="row" fxLayoutAlign="end center">
+                    <div *ngIf="!nfRegistryService.bucketActions" fxLayout="row" fxLayoutAlign="end center">
                         <mat-checkbox [(ngModel)]="row.checked" [checked]="row.checked"
                                       (change)="nfRegistryService.determineAllBucketsSelectedState(row)"
                                       (click)="row.checked = !row.checked;nfRegistryService.determineAllBucketsSelectedState()"></mat-checkbox>

nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.js

@@ -39,16 +39,6 @@ function NfRegistryWorkflowAdministration(nfRegistryApi, nfStorage, nfRegistrySe
     this.nfRegistryService = nfRegistryService;
     this.nfRegistryApi = nfRegistryApi;
     this.dialog = matDialog;
-    this.bucketActions = [{
-        'name': 'permissions',
-        'icon': 'fa fa-pencil',
-        'tooltip': 'Manage Bucket Policies',
-        'type': 'sidenav'
-    }, {
-        'name': 'Delete',
-        'icon': 'fa fa-trash',
-        'tooltip': 'Delete Bucket'
-    }];
 };
 
 NfRegistryWorkflowAdministration.prototype = {
@@ -60,21 +50,16 @@ NfRegistryWorkflowAdministration.prototype = {
     ngOnInit: function () {
         var self = this;
         this.nfRegistryService.inProgress = true;
-        // attempt kerberos authentication
-        this.nfRegistryApi.ticketExchange().subscribe(function (jwt) {
-            self.nfRegistryService.loadCurrentUser().subscribe(function (currentUser) {
-                self.route.params
-                    .switchMap(function (params) {
-                        self.nfRegistryService.adminPerspective = 'workflow';
-                        return self.nfRegistryApi.getBuckets();
-                    })
-                    .subscribe(function (buckets) {
-                        self.nfRegistryService.buckets = buckets;
-                        self.nfRegistryService.filterBuckets();
-                        self.nfRegistryService.inProgress = false;
-                    });
+        this.route.params
+            .switchMap(function (params) {
+                self.nfRegistryService.adminPerspective = 'workflow';
+                return self.nfRegistryApi.getBuckets();
+            })
+            .subscribe(function (buckets) {
+                self.nfRegistryService.buckets = buckets;
+                self.nfRegistryService.filterBuckets();
+                self.nfRegistryService.inProgress = false;
             });
-        });
     },
 
     /**

nifi-registry-web-ui/src/main/webapp/components/administration/workflow/nf-registry-workflow-administration.spec.js

@@ -30,9 +30,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryCreateBucket = require('nifi-registry/components/administration/workflow/dialogs/nf-registry-create-bucket.js');
@@ -46,6 +45,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryWorkflowAdministration Component', function () {
     var comp;
@@ -70,9 +71,8 @@ describe('NfRegistryWorkflowAdministration Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
@@ -80,7 +80,9 @@ describe('NfRegistryWorkflowAdministration Component', function () {
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             entryComponents: [
                 NfRegistryCreateBucket

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js

@@ -52,30 +52,26 @@ NfRegistryBucketGridListViewer.prototype = {
         // reset the breadcrumb state
         this.nfRegistryService.droplet = {};
 
-        // attempt kerberos authentication
-        this.nfRegistryApi.ticketExchange().subscribe(function (jwt) {
-            self.nfRegistryService.loadCurrentUser().subscribe(function (currentUser) {
-                self.route.params
-                    .switchMap(function (params) {
-                        return new rxjs.Observable.forkJoin(
-                            self.nfRegistryApi.getBuckets(),
-                            self.nfRegistryApi.getDroplets(params['bucketId']),
-                            self.nfRegistryApi.getBucket(params['bucketId'])
-                        );
-                    })
-                    .subscribe(function (response) {
-                        var buckets = response[0];
-                        var droplets = response[1];
-                        var bucket = response[2];
-                        self.nfRegistryService.bucket = bucket;
-                        self.nfRegistryService.buckets = buckets;
-                        self.nfRegistryService.droplets = droplets;
-                        self.nfRegistryService.filterDroplets();
-                        self.nfRegistryService.setBreadcrumbState('in');
-                        self.nfRegistryService.inProgress = false;
-                    });
+        // subscribe to the route params
+        self.route.params
+            .switchMap(function (params) {
+                return new rxjs.Observable.forkJoin(
+                    self.nfRegistryApi.getBuckets(),
+                    self.nfRegistryApi.getDroplets(params['bucketId']),
+                    self.nfRegistryApi.getBucket(params['bucketId'])
+                );
+            })
+            .subscribe(function (response) {
+                var buckets = response[0];
+                var droplets = response[1];
+                var bucket = response[2];
+                self.nfRegistryService.bucket = bucket;
+                self.nfRegistryService.buckets = buckets;
+                self.nfRegistryService.droplets = droplets;
+                self.nfRegistryService.filterDroplets();
+                self.nfRegistryService.setBreadcrumbState('in');
+                self.nfRegistryService.inProgress = false;
             });
-        });
 
     },
 

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.spec.js

@@ -17,7 +17,6 @@
 
 var NfRegistryRoutes = require('nifi-registry/nf-registry.routes.js');
 var ngCoreTesting = require('@angular/core/testing');
-var ngHttpTesting = require('@angular/http/testing');
 var ngCommon = require('@angular/common');
 var ngRouter = require('@angular/router');
 var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
@@ -29,9 +28,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -44,6 +42,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryBucketGridListViewer Component', function () {
     var comp;
@@ -65,16 +65,17 @@ describe('NfRegistryBucketGridListViewer Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js

@@ -48,33 +48,30 @@ NfRegistryDropletGridListViewer.prototype = {
         var self = this;
         this.nfRegistryService.inProgress = true;
         this.nfRegistryService.explorerViewType = 'grid-list';
-        // attempt kerberos authentication
-        this.nfRegistryApi.ticketExchange().subscribe(function (jwt) {
-            self.nfRegistryService.loadCurrentUser().subscribe(function (currentUser) {
-                self.route.params
-                    .switchMap(function (params) {
-                        return new rxjs.Observable.forkJoin(
-                            self.nfRegistryApi.getDroplet(params['bucketId'], params['dropletType'], params['dropletId']),
-                            self.nfRegistryApi.getBucket(params['bucketId']),
-                            self.nfRegistryApi.getBuckets(),
-                            self.nfRegistryApi.getDroplets(params['bucketId'])
-                        );
-                    })
-                    .subscribe(function (response) {
-                        var droplet = response[0];
-                        var bucket = response[1];
-                        var buckets = response[2];
-                        var droplets = response[3];
-                        self.nfRegistryService.bucket = bucket;
-                        self.nfRegistryService.buckets = buckets;
-                        self.nfRegistryService.droplet = droplet;
-                        self.nfRegistryService.droplets = droplets;
-                        self.nfRegistryService.filterDroplets();
-                        self.nfRegistryService.setBreadcrumbState('in');
-                        self.nfRegistryService.inProgress = false;
-                    });
+
+        // subscribe to the route params
+        self.route.params
+            .switchMap(function (params) {
+                return new rxjs.Observable.forkJoin(
+                    self.nfRegistryApi.getDroplet(params['bucketId'], params['dropletType'], params['dropletId']),
+                    self.nfRegistryApi.getBucket(params['bucketId']),
+                    self.nfRegistryApi.getBuckets(),
+                    self.nfRegistryApi.getDroplets(params['bucketId'])
+                );
+            })
+            .subscribe(function (response) {
+                var droplet = response[0];
+                var bucket = response[1];
+                var buckets = response[2];
+                var droplets = response[3];
+                self.nfRegistryService.bucket = bucket;
+                self.nfRegistryService.buckets = buckets;
+                self.nfRegistryService.droplet = droplet;
+                self.nfRegistryService.droplets = droplets;
+                self.nfRegistryService.filterDroplets();
+                self.nfRegistryService.setBreadcrumbState('in');
+                self.nfRegistryService.inProgress = false;
             });
-        });
     },
 
     /**

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.spec.js

@@ -17,7 +17,6 @@
 
 var NfRegistryRoutes = require('nifi-registry/nf-registry.routes.js');
 var ngCoreTesting = require('@angular/core/testing');
-var ngHttpTesting = require('@angular/http/testing');
 var ngCommon = require('@angular/common');
 var ngRouter = require('@angular/router');
 var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
@@ -29,9 +28,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -44,6 +42,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryDropletGridListViewer Component', function () {
     var comp;
@@ -65,16 +65,17 @@ describe('NfRegistryDropletGridListViewer Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.html

@@ -20,8 +20,8 @@ limitations under the License.
         <div flex fxLayout="row" fxLayoutAlign="end center">
             <td-chips [(ngModel)]="nfRegistryService.dropletsSearchTerms"
                       [items]="nfRegistryService.autoCompleteDroplets"
-                      (add)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.identity, nfRegistryService.activeDropletColumn.sortOrder);"
-                      (remove)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.identity, nfRegistryService.activeDropletColumn.sortOrder);" class="push-right-sm"></td-chips>
+                      (add)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.name, nfRegistryService.activeDropletColumn.sortOrder);"
+                      (remove)="nfRegistryService.filterDroplets(nfRegistryService.activeDropletColumn.name, nfRegistryService.activeDropletColumn.sortOrder);" class="push-right-sm"></td-chips>
             <span class="push-top-sm pad-right-sm">Sort by:</span>
             <div fxLayout="row" fxLayoutAlign="end center" [matMenuTriggerFor]="dropletGridSortMenu">
                 <div class="push-top-sm" id="droplet-sort-by-field">{{nfRegistryService.getSortByLabel()}}</div>
@@ -84,12 +84,9 @@ limitations under the License.
                         <div id="nifi-registry-explorer-grid-list-viewer-droplet-container-details-change-log"
                              fxFlex="75">
                             <td-steps mode="vertical">
-                                <td-step label="{{snapshotMeta.version}}" sublabel="by {{snapshotMeta.author}}"
+                                <td-step label="Version {{snapshotMeta.version}} - {{snapshotMeta.timestamp | amTimeAgo}}" sublabel="by {{snapshotMeta.author}}"
                                          *ngFor="let snapshotMeta of droplet.snapshotMetadata; let i = index"
                                          [active]="i === 0 ? true : false">
-                                    <ng-template td-step-label>
-                                        <span>{{snapshotMeta.timestamp | amTimeAgo}}</span>
-                                    </ng-template>
                                     <div fxLayout="column" fxLayoutAlign="space-between stretch">
                                         <div fxLayout="row" class="md-body-2">
                                             {{snapshotMeta.comments}}

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js

@@ -53,25 +53,21 @@ NfRegistryGridListViewer.prototype = {
         this.nfRegistryService.bucket = {};
         this.nfRegistryService.droplet = {};
 
-        // attempt kerberos authentication
-        this.nfRegistryApi.ticketExchange().subscribe(function (jwt) {
-            self.nfRegistryService.loadCurrentUser().subscribe(function (currentUser) {
-                self.route.params
-                    .switchMap(function (params) {
-                        return new rxjs.Observable.forkJoin(self.nfRegistryApi.getDroplets(),
-                            self.nfRegistryApi.getBuckets());
-                    })
-                    .subscribe(function (response) {
-                        var droplets = response[0];
-                        var buckets = response[1];
-                        self.nfRegistryService.buckets = buckets;
-                        self.nfRegistryService.droplets = droplets;
-                        self.nfRegistryService.filterDroplets();
-                        self.nfRegistryService.setBreadcrumbState('in');
-                        self.nfRegistryService.inProgress = false;
-                    });
+        // subscribe to the route params
+        self.route.params
+            .switchMap(function (params) {
+                return new rxjs.Observable.forkJoin(self.nfRegistryApi.getDroplets(),
+                    self.nfRegistryApi.getBuckets());
+            })
+            .subscribe(function (response) {
+                var droplets = response[0];
+                var buckets = response[1];
+                self.nfRegistryService.buckets = buckets;
+                self.nfRegistryService.droplets = droplets;
+                self.nfRegistryService.filterDroplets();
+                self.nfRegistryService.setBreadcrumbState('in');
+                self.nfRegistryService.inProgress = false;
             });
-        });
     },
 
     /**

nifi-registry-web-ui/src/main/webapp/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.spec.js

@@ -28,9 +28,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -43,6 +42,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryGridListViewer Component', function () {
     var comp;
@@ -64,16 +65,17 @@ describe('NfRegistryGridListViewer Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/components/explorer/nf-registry-explorer.spec.js

@@ -27,9 +27,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -41,6 +40,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistryExplorer Component', function () {
     var comp;
@@ -61,16 +62,17 @@ describe('NfRegistryExplorer Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.html

@@ -0,0 +1,45 @@
+<!--
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<div id="nifi-registry-user-login-dialog">
+    <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
+        <span class="md-card-title">Log In</span>
+    </div>
+    <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
+        <div class="pad-bottom-md fill-available-width">
+            <mat-input-container floatPlaceholder="always" fxFlex>
+                <input #usernameInput matInput floatPlaceholder="always" placeholder="Username" focused="true">
+            </mat-input-container>
+        </div>
+        <div class="pad-bottom-md fill-available-width">
+            <mat-input-container floatPlaceholder="always" fxFlex>
+                <input #passwordInput type="password" matInput floatPlaceholder="always" placeholder="Password">
+            </mat-input-container>
+        </div>
+    </div>
+    <div fxLayout="row">
+        <span fxFlex></span>
+        <button (click)="usernameInput.value='';passwordInput.value=''" color="fds-regular" mat-raised-button
+                i18n="Clear log in form|A button for clearing the login form.@@nf-clear-user-login-button">
+            Clear
+        </button>
+        <button [disabled]="usernameInput.value.length === 0 || passwordInput.value.length === 0" class="push-left-sm" (click)="login(usernameInput, passwordInput)" color="fds-primary" mat-raised-button
+                i18n="Log in|A button for attempting to authenticate with the registry.@@nf-user-login-button">
+            Log In
+        </button>
+    </div>
+</div>

nifi-registry-web-ui/src/main/webapp/components/login/dialogs/nf-registry-user-login.js

@@ -0,0 +1,69 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var ngCore = require('@angular/core');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
+var ngMaterial = require('@angular/material');
+
+/**
+ * NfRegistryUserLogin constructor.
+ *
+ * @param nfRegistryApi         The api service.
+ * @param nfRegistryService     The nf-registry.service module.
+ * @param matDialogRef          The angular material dialog ref.
+ * @constructor
+ */
+function NfRegistryUserLogin(nfRegistryApi, nfRegistryService, matDialogRef) {
+    this.nfRegistryService = nfRegistryService;
+    this.nfRegistryApi = nfRegistryApi;
+    this.dialogRef = matDialogRef;
+};
+
+NfRegistryUserLogin.prototype = {
+    constructor: NfRegistryUserLogin,
+
+    /**
+     * Submit login form.
+     *
+     * @param username  The user name.
+     * @param password  The password.
+     */
+    login: function (username, password) {
+        var self = this;
+        this.nfRegistryApi.postToLogin(username.value, password.value).subscribe(function(response){
+            if(!response.status || response.status === 200) {
+                //successful login
+                self.nfRegistryService.router.navigateByUrl(self.nfRegistryService.redirectUrl);
+            }
+        });
+    }
+};
+
+NfRegistryUserLogin.annotations = [
+    new ngCore.Component({
+        template: require('./nf-registry-user-login.html!text')
+    })
+];
+
+NfRegistryUserLogin.parameters = [
+    NfRegistryApi,
+    NfRegistryService,
+    ngMaterial.MatDialogRef
+];
+
+module.exports = NfRegistryUserLogin;

nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.html

@@ -15,14 +15,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div fxFill>
-    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-md pad-bottom-md pad-left-sm pad-right-sm">
-        <span class="md-card-title">User Details</span>
-        <button mat-icon-button (click)="closeSideNav()">
-            <mat-icon color="primary">close</mat-icon>
-        </button>
-    </div>
-    <button id="nf-registry-user-details-side-nav-container" mat-raised-button color="fds-primary"
-            (click)="closeSideNav()">Close
-    </button>
-</div>
+<div id="nifi-registry-login-perspective"></div>
+<router-outlet></router-outlet>

nifi-registry-web-ui/src/main/webapp/components/login/nf-registry-login.js

@@ -15,55 +15,50 @@
  * limitations under the License.
  */
 var ngCore = require('@angular/core');
+var ngMaterial = require('@angular/material');
 var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
-var ngRouter = require('@angular/router');
+var nfRegistryAnimations = require('nifi-registry/nf-registry.animations.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 /**
- * NfRegistryUserPermissions constructor.
+ * NfLoginComponent constructor.
  *
  * @param nfRegistryService     The nf-registry.service module.
- * @param Router                The angular router module.
- * @constructor
+ * @param matDialog             The angular material dialog module.
  */
-function NfRegistryUserPermissions(nfRegistryService, Router) {
+function NfLoginComponent(nfRegistryService, matDialog) {
+    // Services
     this.nfRegistryService = nfRegistryService;
-    this.router = Router;
+    this.dialog = matDialog;
 };
 
-NfRegistryUserPermissions.prototype = {
-    constructor: NfRegistryUserPermissions,
+NfLoginComponent.prototype = {
+    constructor: NfLoginComponent,
 
     /**
-     * Initialize the component.
+     * Initialize the component
      */
     ngOnInit: function () {
-        this.nfRegistryService.sidenav.open();
-    },
-
-    /**
-     * Destroy the component.
-     */
-    ngOnDestroy: function () {
-        this.nfRegistryService.sidenav.close();
-    },
-
-    /**
-     * Navigate to administer users for current registry.
-     */
-    closeSideNav: function () {
-        this.router.navigateByUrl('/nifi-registry/administration/users');
+        this.nfRegistryService.perspective = 'login';
+        this.dialog.open(NfUserLoginComponent, {
+            disableClose: true
+        });
     }
 };
 
-NfRegistryUserPermissions.annotations = [
+NfLoginComponent.annotations = [
     new ngCore.Component({
-        template: require('./nf-registry-user-permissions.html!text')
+        template: require('./nf-registry-login.html!text'),
+        animations: [nfRegistryAnimations.slideInLeftAnimation],
+        host: {
+            '[@routeAnimation]': 'routeAnimation'
+        }
     })
 ];
 
-NfRegistryUserPermissions.parameters = [
+NfLoginComponent.parameters = [
     NfRegistryService,
-    ngRouter.Router
+    ngMaterial.MatDialog
 ];
 
-module.exports = NfRegistryUserPermissions;
+module.exports = NfLoginComponent;

nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.html

@@ -15,14 +15,5 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div fxFill>
-    <div fxLayout="row" fxLayoutAlign="space-between center" class="pad-top-sm pad-bottom-md pad-left-md pad-right-md">
-        <span class="md-card-title">{{nfRegistryService.user.identity}}</span>
-        <button mat-icon-button (click)="closeSideNav()">
-            <mat-icon color="primary">close</mat-icon>
-        </button>
-    </div>
-    <button id="nf-registry-user-permissions-side-nav-container" class="push-right-md" mat-raised-button color="fds-primary"
-            (click)="closeSideNav()">Close
-    </button>
-</div>
+<div id="nifi-registry-not-found-perspective"></div>
+<router-outlet></router-outlet>

nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js

@@ -15,22 +15,57 @@
  * limitations under the License.
  */
 var ngCore = require('@angular/core');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var nfRegistryAnimations = require('nifi-registry/nf-registry.animations.js');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
 
 /**
- * NfPageNotFoundComponent constructor.
+ * NfLoginComponent constructor.
+ *
+ * @param nfRegistryService     The nf-registry.service module.
+ * @param fdsDialogService      The FDS dialog service.
  */
-function NfPageNotFoundComponent() {
-    this.title = "Page Not Found!!!!";
+function NfPageNotFoundComponent(nfRegistryService, fdsDialogService) {
+    // Services
+    this.nfRegistryService = nfRegistryService;
+    this.dialogService = fdsDialogService;
 };
 
 NfPageNotFoundComponent.prototype = {
-    constructor: NfPageNotFoundComponent
+    constructor: NfPageNotFoundComponent,
+
+    /**
+     * Initialize the component
+     */
+    ngOnInit: function () {
+        var self = this;
+        this.nfRegistryService.perspective = 'not-found';
+        this.dialogService.openConfirm({
+            title: 'Page Not Found',
+            acceptButton: 'Home',
+            acceptButtonColor: 'fds-warn'
+        }).afterClosed().subscribe(
+            function (accept) {
+                if (accept) {
+                    self.nfRegistryService.router.navigateByUrl(self.nfRegistryService.redirectUrl);
+                }
+            });
+    }
 };
 
 NfPageNotFoundComponent.annotations = [
     new ngCore.Component({
-        template: '<h1>Hello {{title}}!</h1>'
+        template: require('./nf-registry-page-not-found.html!text'),
+        animations: [nfRegistryAnimations.slideInLeftAnimation],
+        host: {
+            '[@routeAnimation]': 'routeAnimation'
+        }
     })
 ];
 
+NfPageNotFoundComponent.parameters = [
+    NfRegistryService,
+    fdsDialogsModule.FdsDialogService,
+];
+
 module.exports = NfPageNotFoundComponent;

nifi-registry-web-ui/src/main/webapp/nf-registry.html

@@ -23,7 +23,7 @@ limitations under the License.
     <div id="nf-registry-app-container">
         <mat-toolbar id="nifi-registry-toolbar">
             <img id="nifi-registry-logo" src="nifi-registry/images/registry-logo-web-app.svg">
-            <div fxFlex="1 1 auto" class="pad-left-xl" [@flyInOut]="nfRegistryService.breadCrumbState">
+            <div *ngIf="nfRegistryService.perspective !== 'login' && nfRegistryService.perspective !== 'not-found'" fxFlex="1 1 auto" class="pad-left-xl" [@flyInOut]="nfRegistryService.breadCrumbState">
                 <span class="pointer" routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}">{{nfRegistryService.registry.name}}</span>
                 <mat-menu #availableRegistriesMenu="matMenu" [overlapTrigger]="false">
                     <button mat-menu-item *ngFor="let registry of nfRegistryService.registries"
@@ -37,11 +37,11 @@ limitations under the License.
                         class="fa fa-caret-down pad-left-sm" aria-hidden="true"></i></span>
                 <span class="pointer" *ngIf="nfRegistryService.perspective === 'explorer' && !nfRegistryService.bucket.identifier"
                       [matMenuTriggerFor]="availableBucketsMenu"> / All<i class="fa fa-caret-down pad-left-sm"
-                                                                         aria-hidden="true"></i></span>
+                                                                          aria-hidden="true"></i></span>
                 <mat-menu #availableBucketsMenu="matMenu" [overlapTrigger]="false">
                     <button mat-menu-item
                             routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}">
-                        <span>All buckets...</span>
+                        <span>All buckets</span>
                     </button>
                     <button mat-menu-item *ngFor="let bucket of nfRegistryService.buckets"
                             routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/buckets/{{bucket.identifier}}">
@@ -57,7 +57,7 @@ limitations under the License.
                 <mat-menu #availableDropletsMenu="matMenu" [overlapTrigger]="false">
                     <button mat-menu-item
                             routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/buckets/{{nfRegistryService.bucket.identifier}}">
-                        <span>All droplets...</span>
+                        <span>All resources</span>
                     </button>
                     <button mat-menu-item *ngFor="let droplet of nfRegistryService.droplets"
                             routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{droplet.link.href}}">
@@ -71,15 +71,15 @@ limitations under the License.
             <button *ngIf="false" matTooltip="Alerts" mat-icon-button>
                 <i class="fa fa-bell" aria-hidden="true"></i>
             </button>
-            <div *ngIf="nfRegistryService.currentUser.identity" fxLayout="column" fxLayoutAlign="space-around end" class="push-right-sm">
+            <div *ngIf="nfRegistryService.currentUser.identity && nfRegistryService.perspective !== 'login' && nfRegistryService.perspective !== 'not-found'" fxLayout="column" fxLayoutAlign="space-around end" class="push-right-sm">
                 <div id="current-user" matTooltip="{{nfRegistryService.currentUser.identity}}">{{nfRegistryService.currentUser.identity}}</div>
                 <a id="logout-link-container" *ngIf="nfRegistryService.currentUser.canLogout" class="link" (click)="logout()">logout</a>
             </div>
-            <button mat-ripple *ngIf="nfRegistryService.perspective === 'explorer'" mat-icon-button
+            <button mat-ripple *ngIf="nfRegistryService.currentUser.resourcePermissions.anyTopLevelResource.canRead && nfRegistryService.perspective === 'explorer'" mat-icon-button
                     routerLink="/nifi-registry/administration/workflow">
                 <i class="fa fa-wrench" aria-hidden="true"></i>
             </button>
-            <button mat-ripple *ngIf="nfRegistryService.perspective === 'administration'" mat-mini-fab
+            <button [matTooltip]="'Close administration.'" mat-ripple *ngIf="nfRegistryService.perspective === 'administration'" mat-mini-fab
                     routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}">
                 <mat-icon color="primary">close</mat-icon>
             </button>

nifi-registry-web-ui/src/main/webapp/nf-registry.js

@@ -68,7 +68,8 @@ NfRegistry.prototype = {
      * Invalidate old tokens and route to login page
      */
     logout: function() {
-        this.nfRegistryService.currentUser = {};
+        delete this.nfRegistryService.currentUser.identity;
+        delete this.nfRegistryService.currentUser.anonymous;
         this.nfStorage.removeItem('jwt');
         this.router.navigateByUrl('/nifi-registry/login');
     }

nifi-registry-web-ui/src/main/webapp/nf-registry.module.js

@@ -23,15 +23,17 @@ var NfRegistry = require('nifi-registry/nf-registry.js');
 var NfRegistryApi = require('nifi-registry/services/nf-registry.api.js');
 var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
 var NfPageNotFoundComponent = require('nifi-registry/components/page-not-found/nf-registry-page-not-found.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
 var NfRegistryCreateNewGroup = require('nifi-registry/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js');
-var NfRegistryAddSelectedToGroup = require('nifi-registry/components/administration/users/dialogs/add-selected-users-to-group/nf-registry-add-selected-users-to-group.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryAddUserToGroups = require('nifi-registry/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js');
+var NfRegistryAddUsersToGroup = require('nifi-registry/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryCreateBucket = require('nifi-registry/components/administration/workflow/dialogs/nf-registry-create-bucket.js');
@@ -42,6 +44,7 @@ var fdsCore = require('@fluid-design-system/core');
 var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
+var nfRegistryAuthGuardService = require('nifi-registry/services/nf-registry.auth-guard.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
 
 function NfRegistryModule() {
@@ -65,29 +68,37 @@ NfRegistryModule.annotations = [
             NfRegistryExplorer,
             NfRegistryAdministration,
             NfRegistryUsersAdministration,
-            NfRegistryUserDetails,
-            NfRegistryUserPermissions,
-            NfRegistryUserGroupPermissions,
+            NfRegistryManageUser,
+            NfRegistryManageGroup,
             NfRegistryBucketPermissions,
             NfRegistryWorkflowAdministration,
             NfRegistryAddUser,
             NfRegistryCreateBucket,
             NfRegistryCreateNewGroup,
-            NfRegistryAddSelectedToGroup,
+            NfRegistryAddUserToGroups,
+            NfRegistryAddUsersToGroup,
             NfRegistryGridListViewer,
             NfRegistryBucketGridListViewer,
             NfRegistryDropletGridListViewer,
-            NfPageNotFoundComponent
+            NfPageNotFoundComponent,
+            NfLoginComponent,
+            NfUserLoginComponent
         ],
         entryComponents: [
             NfRegistryAddUser,
             NfRegistryCreateBucket,
             NfRegistryCreateNewGroup,
-            NfRegistryAddSelectedToGroup
+            NfRegistryAddUserToGroups,
+            NfRegistryAddUsersToGroup,
+            NfUserLoginComponent
         ],
         providers: [
             NfRegistryService,
             NfRegistryAuthService,
+            nfRegistryAuthGuardService.NfRegistryUsersAdministrationAuthGuard,
+            nfRegistryAuthGuardService.NfRegistryWorkflowsAdministrationAuthGuard,
+            nfRegistryAuthGuardService.NfRegistryLoginAuthGuard,
+            nfRegistryAuthGuardService.NfRegistryResourcesAuthGuard,
             NfRegistryApi,
             NfStorage,
             {

nifi-registry-web-ui/src/main/webapp/nf-registry.routes.js

@@ -18,17 +18,18 @@
 var ngRouter = require('@angular/router');
 var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
 var NfPageNotFoundComponent = require('nifi-registry/components/page-not-found/nf-registry-page-not-found.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
 var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
 var NfRegistryBucketGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-bucket-grid-list-viewer.js');
 var NfRegistryDropletGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-droplet-grid-list-viewer.js');
+var nfRegistryAuthGuardService = require('nifi-registry/services/nf-registry.auth-guard.service.js');
 
 var NfRegistryRoutes = new ngRouter.RouterModule.forRoot([{
     path: 'nifi-registry/explorer',
@@ -36,17 +37,23 @@ var NfRegistryRoutes = new ngRouter.RouterModule.forRoot([{
     children: [
         {
             path: 'grid-list',
-            component: NfRegistryGridListViewer
+            component: NfRegistryGridListViewer,
+            canActivate: [nfRegistryAuthGuardService.NfRegistryResourcesAuthGuard]
         }, {
             path: 'grid-list/buckets/:bucketId',
-            component: NfRegistryBucketGridListViewer
+            component: NfRegistryBucketGridListViewer,
+            canActivate: [nfRegistryAuthGuardService.NfRegistryResourcesAuthGuard]
         },
         {
             path: 'grid-list/buckets/:bucketId/:dropletType/:dropletId',
-            component: NfRegistryDropletGridListViewer
+            component: NfRegistryDropletGridListViewer,
+            canActivate: [nfRegistryAuthGuardService.NfRegistryResourcesAuthGuard]
         }
-        ]
-    // canActivate: [AuthGuard] //TODO: https://angular.io/api/router/CanActivate https://scotch.io/tutorials/routing-angular-2-single-page-apps-with-the-component-router
+    ]
+}, {
+    path: 'nifi-registry/login',
+    component: NfLoginComponent,
+    canActivate: [nfRegistryAuthGuardService.NfRegistryLoginAuthGuard]
 }, {
     path: 'nifi-registry/fluid-design-system',
     component: FdsDemo
@@ -55,14 +62,16 @@ var NfRegistryRoutes = new ngRouter.RouterModule.forRoot([{
     component: NfRegistryAdministration,
     children: [{
         path: '',
-        redirectTo: 'users',
+        redirectTo: 'workflow',
         pathMatch: 'full'
     }, {
         path: 'users',
-        component: NfRegistryUsersAdministration
+        component: NfRegistryUsersAdministration,
+        canActivate: [nfRegistryAuthGuardService.NfRegistryUsersAdministrationAuthGuard]
     }, {
         path: 'workflow',
-        component: NfRegistryWorkflowAdministration
+        component: NfRegistryWorkflowAdministration,
+        canActivate: [nfRegistryAuthGuardService.NfRegistryWorkflowsAdministrationAuthGuard]
     }]
 }, {
     path: 'nifi-registry/explorer/grid-list/buckets',
@@ -80,20 +89,19 @@ var NfRegistryRoutes = new ngRouter.RouterModule.forRoot([{
     path: '**',
     component: NfPageNotFoundComponent
 }, {
-    path: 'user/details/:userId',
-    component: NfRegistryUserDetails,
+    path: 'manage/user/:userId',
+    component: NfRegistryManageUser,
+    canActivate: [nfRegistryAuthGuardService.NfRegistryUsersAdministrationAuthGuard],
     outlet: 'sidenav'
 }, {
-    path: 'user/permissions/:userId',
-    component: NfRegistryUserPermissions,
-    outlet: 'sidenav'
-}, {
-    path: 'group/permissions/:groupId',
-    component: NfRegistryUserGroupPermissions,
+    path: 'manage/group/:groupId',
+    component: NfRegistryManageGroup,
+    canActivate: [nfRegistryAuthGuardService.NfRegistryUsersAdministrationAuthGuard],
     outlet: 'sidenav'
 }, {
     path: 'bucket/permissions/:bucketId',
     component: NfRegistryBucketPermissions,
+    canActivate: [nfRegistryAuthGuardService.NfRegistryWorkflowsAdministrationAuthGuard],
     outlet: 'sidenav'
 }]);
 

nifi-registry-web-ui/src/main/webapp/nf-registry.spec.js

@@ -27,9 +27,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -42,6 +41,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistry Component', function () {
     var comp;
@@ -64,16 +65,17 @@ describe('NfRegistry Component', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,

nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.js

@@ -264,10 +264,15 @@ NfRegistryApi.prototype = {
             });
     },
 
-    //TODO: REST call to API to get user by id.
+    /**
+     * Get user by id.
+     *
+     * @param userId
+     * @returns {*}
+     */
     getUser: function (userId) {
         var self = this;
-        return this.http.get('/nifi-registry-api/users/' + userId)
+        return this.http.get('/nifi-registry-api/tenants/users/' + userId)
             .map(function (response) {
                 return response;
             })
@@ -285,15 +290,40 @@ NfRegistryApi.prototype = {
     /**
      * Creates a user.
      *
-     * @param {string} identifier   The identifier of the user.
      * @param {string} identity     The identity of the user.
      * @returns {*}
      */
-    addUser: function (identifier, identity) {
+    addUser: function (identity) {
         var self = this;
         return this.http.post('/nifi-registry-api/tenants/users', {
-            'identifier': identifier,
-            'identity': identity
+            identity: identity,
+            resourcePermissions: {
+                anyTopLevelResource: {
+                    canRead: false,
+                    canWrite: false,
+                    canDelete: false
+                },
+                buckets: {
+                    canRead: false,
+                    canWrite: false,
+                    canDelete: false
+                },
+                tenants: {
+                    canRead: false,
+                    canWrite: false,
+                    canDelete: false
+                },
+                policies: {
+                    canRead: false,
+                    canWrite: false,
+                    canDelete: false
+                },
+                proxy: {
+                    canRead: false,
+                    canWrite: false,
+                    canDelete: false
+                }
+            }
         }, headers)
             .map(function (response) {
                 return response;
@@ -309,6 +339,27 @@ NfRegistryApi.prototype = {
             });
     },
 
+    /**
+     * Updates a user.
+     *
+     * @param {string} identifier   The identifier of the user.
+     * @param {string} identity     The identity of the user.
+     * @returns {*}
+     */
+    updateUser: function (identifier, identity) {
+        var self = this;
+        return this.http.put('/nifi-registry-api/tenants/users/' + identifier, {
+            'identifier': identifier,
+            'identity': identity
+        }, headers)
+            .map(function (response) {
+                return response;
+            })
+            .catch(function (error) {
+                return rxjs.Observable.of(error);
+            });
+    },
+
     /**
      * Gets all users.
      *
@@ -465,6 +516,48 @@ NfRegistryApi.prototype = {
             'identifier': identifier,
             'identity': identity,
             'users': users
+        }, headers)
+            .map(function (response) {
+                return response;
+            })
+            .catch(function (error) {
+                return rxjs.Observable.of(error);
+            });
+    },
+
+    /**
+     * Get policy action resource.
+     *
+     * @param {string} action   The name of the resource action (e.g. READ/WRITE/DELETE).
+     * @param {string} resource   The name of the resource action (e.g. READ/WRITE/DELETE).
+     * @returns {*}
+     */
+    getPolicyActionResource: function (action, resource) {
+        var self = this;
+        return this.http.get('/nifi-registry-api/policies/' + action + resource)
+            .map(function (response) {
+                return response;
+            });
+    },
+
+    /**
+     * Update policy action resource.
+     *
+     * @param {string} identifier   The identifier of the group.
+     * @param {string} action       The name of the resource action (e.g. READ/WRITE/DELETE).
+     * @param {string} resource     The name of the resource.
+     * @param {string} users        The users with resource privileges.
+     * @param {string} userGroups   The user groups with resource privileges.
+     * @returns {*}
+     */
+    putPolicyActionResource: function (identifier, action, resource, users, userGroups) {
+        var self = this;
+        return this.http.put('/nifi-registry-api/policies/' + identifier, {
+            'identifier': identifier,
+            'resource': resource,
+            'action': action,
+            'users': users,
+            'userGroups': userGroups
         }, headers)
             .map(function (response) {
                 return response;
@@ -480,6 +573,64 @@ NfRegistryApi.prototype = {
             });
     },
 
+    /**
+     * Creates a policy action resource.
+     *
+     * @param {string} action       The name of the resource action (e.g. READ/WRITE/DELETE).
+     * @param {string} resource     The name of the resource.
+     * @param {string} users        The users with resource privileges.
+     * @param {string} userGroups   The user groups with resource privileges.
+     * @returns {*}
+     */
+    postPolicyActionResource: function (action, resource, users, userGroups) {
+        var self = this;
+        return this.http.post('/nifi-registry-api/policies', {
+            'resource': resource,
+            'action': action,
+            'users': users,
+            'userGroups': userGroups
+        }, headers)
+            .map(function (response) {
+                return response;
+            })
+            .catch(function (error) {
+                self.dialogService.openConfirm({
+                    title: 'Error',
+                    message: error.message,
+                    acceptButton: 'Ok',
+                    acceptButtonColor: 'fds-warn'
+                });
+                return rxjs.Observable.of(error);
+            });
+    },
+
+    /**
+     * Authenticate a user.
+     *
+     * @param {string} username     The name of the user to authenticate.
+     * @param {string} password     The user password.
+     * @returns {*}
+     */
+    postToLogin: function (username, password) {
+        var self = this;
+        return this.http.post('/nifi-registry-api/access/token/login', {
+            'username': username,
+            'password': password
+        }, headers)
+            .map(function (response) {
+                return response;
+            })
+            .catch(function (error) {
+                self.dialogService.openConfirm({
+                    title: 'Error',
+                    message: 'Please contact your System Administrator.',
+                    acceptButton: 'Ok',
+                    acceptButtonColor: 'fds-warn'
+                });
+                return rxjs.Observable.of(error);
+            });
+    },
+
     /**
      * Kerberos ticket exchange.
      *
@@ -494,7 +645,7 @@ NfRegistryApi.prototype = {
                 .map(function (jwt) {
                     // get the payload and store the token with the appropriate expiration
                     var token = self.nfStorage.getJwtPayload(jwt);
-                    if(token) {
+                    if (token) {
                         var expiration = parseInt(token['exp'], 10) * MILLIS_PER_SECOND;
                         self.nfStorage.setItem('jwt', jwt, expiration);
                     }
@@ -523,7 +674,35 @@ NfRegistryApi.prototype = {
                 if (error.status === 401) {
                     self.router.navigateByUrl('/nifi-registry/login');
                 }
-                return rxjs.Observable.of({});
+                return rxjs.Observable.of({
+                    resourcePermissions: {
+                        anyTopLevelResource: {
+                            canRead: false,
+                            canWrite: false,
+                            canDelete: false
+                        },
+                        buckets: {
+                            canRead: false,
+                            canWrite: false,
+                            canDelete: false
+                        },
+                        tenants: {
+                            canRead: false,
+                            canWrite: false,
+                            canDelete: false
+                        },
+                        policies: {
+                            canRead: false,
+                            canWrite: false,
+                            canDelete: false
+                        },
+                        proxy: {
+                            canRead: false,
+                            canWrite: false,
+                            canDelete: false
+                        }
+                    }
+                });
             });
     }
 };
@@ -535,4 +714,4 @@ NfRegistryApi.parameters = [
     ngRouter.Router
 ];
 
-module.exports = NfRegistryApi;
+module.exports = NfRegistryApi;

nifi-registry-web-ui/src/main/webapp/services/nf-registry.api.spec.js

@@ -28,9 +28,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -43,6 +42,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 xdescribe('NfRegistry API w/ Angular testing utils', function () {
     var nfRegistryApi;
@@ -62,16 +63,17 @@ xdescribe('NfRegistry API w/ Angular testing utils', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,
@@ -1037,11 +1039,6 @@ xdescribe('NfRegistry API w/ Angular testing utils', function () {
             identity: 'User #1',
             identifier: '9999'
         }]).subscribe(function (response) {
-            var dialogServiceCall = nfRegistryApi.dialogService.openConfirm.calls.first();
-            expect(dialogServiceCall.args[0].title).toBe('Error');
-            expect(dialogServiceCall.args[0].message).toBe('Http failure response for /nifi-registry-api/tenants/user-groups/123: 401 PUT user groups mock error');
-            expect(dialogServiceCall.args[0].acceptButton).toBe('Ok');
-            expect(dialogServiceCall.args[0].acceptButtonColor).toBe('fds-warn');
         });
 
         // the request it made

nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth-guard.service.js

@@ -0,0 +1,257 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+
+/**
+ * NfRegistryUsersAdministrationAuthGuard constructor.
+ *
+ * @param nfRegistryService                 The nfRegistryService module.
+ * @constructor
+ */
+function NfRegistryUsersAdministrationAuthGuard(nfRegistryService) {
+    this.nfRegistryService = nfRegistryService;
+};
+
+NfRegistryUsersAdministrationAuthGuard.prototype = {
+    constructor: NfRegistryUsersAdministrationAuthGuard,
+
+    /**
+     * Can activate guard.
+     * @returns {*}
+     */
+    canActivate: function (route, state) {
+        var url = state.url;
+
+        return this.checkLogin(url);
+    },
+
+    checkLogin: function (url) {
+        var self = this;
+        if (this.nfRegistryService.currentUser.resourcePermissions.tenants.canRead) { return true; }
+
+        // Store the attempted URL for redirecting
+        this.nfRegistryService.redirectUrl = url;
+
+        // attempt kerberos authentication
+        this.nfRegistryService.api.ticketExchange().subscribe(function (jwt) {
+            self.nfRegistryService.api.loadCurrentUser().subscribe(function (currentUser) {
+                self.nfRegistryService.currentUser = currentUser;
+                // if the user is logged, we want to determine if they were logged in using a certificate
+                if (currentUser.anonymous === false) {
+                    // render the logout button if there is a token locally
+                    if (self.nfRegistryService.nfStorage.getItem('jwt') !== null) {
+                        self.nfRegistryService.currentUser.canLogout = true;
+                    }
+
+                    // redirect to explorer perspective if not admin
+                    if (!currentUser.resourcePermissions.anyTopLevelResource.canRead) {
+                        self.nfRegistryService.router.navigateByUrl('/nifi-registry/explorer');
+                    } else {
+                        self.nfRegistryService.router.navigateByUrl(url);
+                    }
+                } else {
+                    // navigate to the login page
+                    self.nfRegistryService.router.navigateByUrl('/nifi-registry/login');
+                }
+            });
+        });
+
+        return false;
+    }
+};
+
+NfRegistryUsersAdministrationAuthGuard.parameters = [
+    NfRegistryService
+];
+
+/**
+ * NfRegistryWorkflowsAdministrationAuthGuard constructor.
+ *
+ * @param nfRegistryService                 The nfRegistryService module.
+ * @constructor
+ */
+function NfRegistryWorkflowsAdministrationAuthGuard(nfRegistryService) {
+    this.nfRegistryService = nfRegistryService;
+};
+
+NfRegistryWorkflowsAdministrationAuthGuard.prototype = {
+    constructor: NfRegistryWorkflowsAdministrationAuthGuard,
+
+    /**
+     * Can activate guard.
+     * @returns {*}
+     */
+    canActivate: function (route, state) {
+        var url = state.url;
+
+        return this.checkLogin(url);
+    },
+
+    checkLogin: function (url) {
+        var self = this;
+        if (this.nfRegistryService.currentUser.resourcePermissions.buckets.canRead || this.nfRegistryService.currentUser.anonymous) { return true; }
+
+        // Store the attempted URL for redirecting
+        this.nfRegistryService.redirectUrl = url;
+
+        // attempt kerberos authentication
+        this.nfRegistryService.api.ticketExchange().subscribe(function (jwt) {
+            self.nfRegistryService.api.loadCurrentUser().subscribe(function (currentUser) {
+                self.nfRegistryService.currentUser = currentUser;
+                // if the user is logged, we want to determine if they were logged in using a certificate
+                if (currentUser.anonymous === false) {
+                    // render the logout button if there is a token locally
+                    if (self.nfRegistryService.nfStorage.getItem('jwt') !== null) {
+                        self.nfRegistryService.currentUser.canLogout = true;
+                    }
+
+                    // redirect to explorer perspective if not admin
+                    if (!currentUser.resourcePermissions.anyTopLevelResource.canRead) {
+                        self.nfRegistryService.router.navigateByUrl('/nifi-registry/explorer');
+                    } else {
+                        if (currentUser.resourcePermissions.buckets) {
+                            self.nfRegistryService.router.navigateByUrl(url);
+                        } else {
+                            self.nfRegistryService.router.navigateByUrl('/nifi-registry/administration/users');
+                        }
+                    }
+                } else {
+                    // Navigate to the login page
+                    self.nfRegistryService.router.navigateByUrl(url);
+                }
+            });
+        });
+
+        return false;
+    }
+};
+
+NfRegistryWorkflowsAdministrationAuthGuard.parameters = [
+    NfRegistryService
+];
+
+/**
+ * NfRegistryLoginAuthGuard constructor.
+ *
+ * @param nfRegistryService                 The nfRegistryService module.
+ * @constructor
+ */
+function NfRegistryLoginAuthGuard(nfRegistryService) {
+    this.nfRegistryService = nfRegistryService;
+};
+
+NfRegistryLoginAuthGuard.prototype = {
+    constructor: NfRegistryLoginAuthGuard,
+
+    /**
+     * Can activate guard.
+     * @returns {*}
+     */
+    canActivate: function (route, state) {
+        var url = state.url;
+
+        return this.checkLogin(url);
+    },
+
+    checkLogin: function (url) {
+        var self = this;
+        if (this.nfRegistryService.currentUser.anonymous) { return true; }
+        // attempt kerberos authentication
+        this.nfRegistryService.api.ticketExchange().subscribe(function (jwt) {
+            self.nfRegistryService.api.loadCurrentUser().subscribe(function (currentUser) {
+                self.nfRegistryService.currentUser = currentUser;
+                // if the user is logged, we want to determine if they were logged in using a certificate
+                if (currentUser.anonymous === false) {
+                    // render the logout button if there is a token locally
+                    if (self.nfRegistryService.nfStorage.getItem('jwt') !== null) {
+                        self.nfRegistryService.currentUser.canLogout = true;
+                    }
+                    self.nfRegistryService.router.navigateByUrl(self.nfRegistryService.redirectUrl);
+                } else {
+                    self.nfRegistryService.router.navigateByUrl('/nifi-registry/login');
+                }
+            });
+        });
+
+        return false;
+    }
+};
+
+NfRegistryLoginAuthGuard.parameters = [
+    NfRegistryService
+];
+
+/**
+ * NfRegistryResourcesAuthGuard constructor.
+ *
+ * @param nfRegistryService                 The nfRegistryService module.
+ * @constructor
+ */
+function NfRegistryResourcesAuthGuard(nfRegistryService) {
+    this.nfRegistryService = nfRegistryService;
+};
+
+NfRegistryResourcesAuthGuard.prototype = {
+    constructor: NfRegistryResourcesAuthGuard,
+
+    /**
+     * Can activate guard.
+     * @returns {*}
+     */
+    canActivate: function (route, state) {
+        var url = state.url;
+
+        return this.checkLogin(url);
+    },
+
+    checkLogin: function (url) {
+        var self = this;
+        if (this.nfRegistryService.currentUser.resourcePermissions.buckets.canRead) { return true; }
+
+        // Store the attempted URL for redirecting
+        this.nfRegistryService.redirectUrl = url;
+
+        // attempt kerberos authentication
+        this.nfRegistryService.api.ticketExchange().subscribe(function (jwt) {
+            self.nfRegistryService.api.loadCurrentUser().subscribe(function (currentUser) {
+                self.nfRegistryService.currentUser = currentUser;
+                // if the user is logged, we want to determine if they were logged in using a certificate
+                if (currentUser.anonymous === false) {
+                    // render the logout button if there is a token locally
+                    if (self.nfRegistryService.nfStorage.getItem('jwt') !== null) {
+                        self.nfRegistryService.currentUser.canLogout = true;
+                    }
+                }
+                self.nfRegistryService.router.navigateByUrl(url);
+            });
+        });
+
+        return false;
+    }
+};
+
+NfRegistryResourcesAuthGuard.parameters = [
+    NfRegistryService
+];
+
+module.exports = {
+    NfRegistryUsersAdministrationAuthGuard: NfRegistryUsersAdministrationAuthGuard,
+    NfRegistryWorkflowsAdministrationAuthGuard: NfRegistryWorkflowsAdministrationAuthGuard,
+    NfRegistryLoginAuthGuard: NfRegistryLoginAuthGuard,
+    NfRegistryResourcesAuthGuard: NfRegistryResourcesAuthGuard
+};

nifi-registry-web-ui/src/main/webapp/services/nf-registry.auth.service.js

@@ -34,7 +34,7 @@ NfRegistryAuth.prototype = {
      * Gets the jwt token.
      * @returns {*}
      */
-    getToken: function() {
+    getToken: function () {
         return this.nfStorage.getItem('jwt');
     }
 };

nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.js

@@ -38,6 +38,7 @@ function NfRegistryService(nfRegistryApi, nfStorage, tdDataTableService, router,
     this.registry = {
         name: "Nifi Registry"
     };
+    this.redirectUrl = '/nifi-registry/explorer/grid-list';
 
     // Services
     this.router = router;
@@ -47,65 +48,7 @@ function NfRegistryService(nfRegistryApi, nfStorage, tdDataTableService, router,
     this.snackBarService = fdsSnackBarService;
     this.dataTableService = tdDataTableService;
 
-    //<editor-fold desc="application state objects">
-
-    // General
-    this.bucket = {};
-    this.buckets = [];
-    this.droplet = {};
-    this.droplets = [];
-    this.currentUser = {};
-    this.user = {};
-    this.group = {};
-    this.users = [];
-    this.groups = [];
-    this.alerts = [];
-    this.explorerViewType = '';
-    this.perspective = '';
-    this.breadCrumbState = 'out';
-
-    // Droplets
-    this.filteredDroplets = [];
-    this.dropletActions = [
-        {
-            name: 'Delete',
-            icon: 'fa fa-trash',
-            tooltip: 'Delete'
-        }
-    ];
-    this.dropletColumns = [
-        {
-            name: 'name',
-            label: 'Name',
-            sortable: true
-        },
-        {
-            name: 'modifiedTimestamp',
-            label: 'Updated',
-            sortable: true
-        }
-    ];
-    this.autoCompleteDroplets = [];
-    this.dropletsSearchTerms = [];
-
-    // Buckets
-    this.filteredBuckets = [];
-    this.bucketColumns = [
-        {
-            name: 'name',
-            label: 'Bucket Name',
-            sortable: true,
-            tooltip: 'Sort Buckets by name.'
-        }
-    ];
-    this.allBucketsSelected = false;
-    this.autoCompleteBuckets = [];
-    this.bucketsSearchTerms = [];
-    this.isMultiBucketActionsDisabled = true;
-
-    // Users and Groups
-    this.filteredUsers = [];
-    this.filteredUserGroups = [];
+    // data table column definitions
     this.userColumns = [
         {
             name: 'identity',
@@ -115,11 +58,241 @@ function NfRegistryService(nfRegistryApi, nfStorage, tdDataTableService, router,
             width: 100
         }
     ];
+    this.userGroupsColumns = [
+        {
+            name: 'identity',
+            label: 'Display Name',
+            sortable: true,
+            tooltip: 'Group name.',
+            width: 100
+        }
+    ];
+    this.userPoliciesColumns = [
+        {
+            name: 'identity',
+            label: 'Bucket Name',
+            sortable: true,
+            tooltip: 'Bucket name.',
+            width: 100
+        },
+        {
+            name: 'identity',
+            label: 'Bucket Name',
+            sortable: true,
+            tooltip: 'Bucket name.',
+            width: 100
+        }
+    ];
+    this.dropletColumns = [
+        {
+            name: 'name',
+            label: 'Name',
+            sortable: true,
+            active: true
+        },
+        {
+            name: 'modifiedTimestamp',
+            label: 'Updated',
+            sortable: true
+        }
+    ];
+    this.bucketColumns = [
+        {
+            name: 'name',
+            label: 'Bucket Name',
+            sortable: true,
+            tooltip: 'Sort Buckets by name.'
+        }
+    ];
+
+    // data table available row action definitions
+    this.bucketActions = [
+        {
+            'name': 'permissions',
+            'icon': 'fa fa-pencil',
+            'tooltip': 'Manage Bucket Policies',
+            'type': 'sidenav'
+        }, {
+            'name': 'Delete',
+            'icon': 'fa fa-trash',
+            'tooltip': 'Delete Bucket'
+        }
+    ];
+    this.dropletActions = [
+        {
+            name: 'delete',
+            icon: 'fa fa-trash',
+            tooltip: 'Delete'
+        }
+    ];
+    this.usersActions = [
+        {
+            name: 'manage',
+            icon: 'fa fa-pencil',
+            tooltip: 'Manage User Policies',
+            type: 'sidenav',
+            tooltip: 'Manage User'
+        }, {
+            name: 'delete',
+            icon: 'fa fa-trash',
+            tooltip: 'Delete User'
+        }
+    ];
+    this.userGroupsActions = [
+        {
+            name: 'manage',
+            icon: 'fa fa-pencil',
+            tooltip: 'Manage User Group Policies',
+            type: 'sidenav'
+        }, {
+            name: 'delete',
+            icon: 'fa fa-trash',
+            tooltip: 'Delete User Group'
+        }
+    ];
+
+    // model for buckets privileges
+    this.BUCKETS_PRIVS = {
+        '/buckets': ['read', 'write', 'delete']
+    };
+
+    // model for tenants privileges
+    this.TENANTS_PRIVS = {
+        '/tenants': ['read', 'write', 'delete']
+    };
+
+    // model for policies privileges
+    this.POLICIES_PRIVS = {
+        '/policies': ['read', 'write', 'delete']
+    };
+
+    // model for proxy privileges
+    this.PROXY_PRIVS = {
+        '/proxy': ['write']
+    };
+
+    //<editor-fold desc="application state objects">
+
+    // General
+    this.alerts = [];
+    this.inProgress = false;
+    this.perspective = '';
+    this.breadCrumbState = 'out';
+    this.explorerViewType = '';
+    this.currentUser = {
+        resourcePermissions: {
+            anyTopLevelResource: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            buckets: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            tenants: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            policies: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            proxy: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            }
+        }
+    };
+    this.bucket = {};
+    this.buckets = [];
+    this.droplet = {};
+    this.droplets = [];
+    this.user = {
+        resourcePermissions: {
+            anyTopLevelResource: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            buckets: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            tenants: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            policies: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            proxy: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            }
+        }
+    };
+    this.users = [];
+    this.group = {
+        resourcePermissions: {
+            anyTopLevelResource: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            buckets: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            tenants: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            policies: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            },
+            proxy: {
+                canRead: false,
+                canWrite: false,
+                canDelete: false
+            }
+        }
+    };
+    this.groups = [];
+
+    // Droplets
+    this.filteredDroplets = [];
+    this.activeDropletColumn = this.dropletColumns[0];
+    this.autoCompleteDroplets = [];
+    this.dropletsSearchTerms = [];
+
+    // Buckets
+    this.filteredBuckets = [];
+    this.allBucketsSelected = false;
+    this.autoCompleteBuckets = [];
+    this.bucketsSearchTerms = [];
+    this.isMultiBucketActionsDisabled = true;
+
+    // Users and Groups
+    this.filteredUsers = [];
+    this.filteredUserGroups = [];
     this.allUsersAndGroupsSelected = false;
     this.autoCompleteUsersAndGroups = [];
     this.usersSearchTerms = [];
 
-    this.inProgress = false;
     //</editor-fold>
 };
 
@@ -347,6 +520,7 @@ NfRegistryService.prototype = {
                                 });
                                 self.bucket = {};
                                 self.filterBuckets();
+                                self.determineAllBucketsSelectedState();
                             });
                         }
                     });
@@ -604,7 +778,7 @@ NfRegistryService.prototype = {
         // get the current user
         return rxjs.Observable.of(this.api.loadCurrentUser().subscribe(function (currentUser) {
             // if the user is logged, we want to determine if they were logged in using a certificate
-            if (currentUser.status !== "UNKNOWN") {
+            if (currentUser.anonymous === false) {
                 // render the users name
                 self.currentUser = currentUser;
 
@@ -798,9 +972,10 @@ NfRegistryService.prototype = {
      */
     executeUserAction: function (action, user) {
         var self = this;
+        this.user = user;
         switch (action.name.toLowerCase()) {
             case 'delete':
-                this.dialogService.openConfirm({
+                return this.dialogService.openConfirm({
                     title: 'Delete User',
                     message: 'This user will lose all access to the registry.',
                     cancelButton: 'Cancel',
@@ -823,12 +998,13 @@ NfRegistryService.prototype = {
                                     duration: 3000
                                 });
                                 self.filterUsersAndGroups();
+                                self.determineAllUsersAndGroupsSelectedState();
                             });
                         }
                     });
                 break;
-            case 'permissions':
-                this.router.navigateByUrl('/nifi-registry/administration/users(' + action.type + ':user/' + action.name + '/' + user.identifier + ')');
+            case 'manage':
+                this.router.navigateByUrl('/nifi-registry/administration/users(' + action.type + ':' + action.name + '/user/' + user.identifier + ')');
                 break;
         }
     },
@@ -867,12 +1043,13 @@ NfRegistryService.prototype = {
                                     duration: 3000
                                 });
                                 self.filterUsersAndGroups();
+                                self.determineAllUsersAndGroupsSelectedState();
                             });
                         }
                     });
                 break;
-            case 'permissions':
-                this.router.navigateByUrl('/nifi-registry/administration/users(' + action.type + ':group/' + action.name + '/' + group.identifier + ')');
+            case 'manage':
+                this.router.navigateByUrl('/nifi-registry/administration/users(' + action.type + ':' + action.name + '/group/' + group.identifier + ')');
                 break;
         }
     },

nifi-registry-web-ui/src/main/webapp/services/nf-registry.service.spec.js

@@ -28,9 +28,8 @@ var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-
 var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
 var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
 var NfRegistryAddUser = require('nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js');
-var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
-var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
-var NfRegistryUserGroupPermissions = require('nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js');
+var NfRegistryManageUser = require('nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js');
+var NfRegistryManageGroup = require('nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js');
 var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
 var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
 var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
@@ -45,6 +44,8 @@ var ngCommonHttp = require('@angular/common/http');
 var NfRegistryTokenInterceptor = require('nifi-registry/services/nf-registry.token.interceptor.js');
 var NfRegistryAuthService = require('nifi-registry/services/nf-registry.auth.service.js');
 var NfStorage = require('nifi-registry/services/nf-storage.service.js');
+var NfLoginComponent = require('nifi-registry/components/login/nf-registry-login.js');
+var NfUserLoginComponent = require('nifi-registry/components/login/dialogs/nf-registry-user-login.js');
 
 describe('NfRegistry Service isolated unit tests', function () {
     var nfRegistryService;
@@ -86,6 +87,7 @@ describe('NfRegistry Service isolated unit tests', function () {
 
     it('should get the `Oldest (update)` sort by label', function () {
         //Setup the nfRegistryService state for this test
+        nfRegistryService.dropletColumns[0].active = false;
         nfRegistryService.dropletColumns[1].active = true;
 
         // The function to test
@@ -97,6 +99,7 @@ describe('NfRegistry Service isolated unit tests', function () {
 
     it('should get the `Newest (update)` sort by label', function () {
         //Setup the nfRegistryService state for this test
+        nfRegistryService.dropletColumns[0].active = false;
         nfRegistryService.dropletColumns[1].active = true;
         nfRegistryService.dropletColumns[1].sortOrder = 'ASC';
 
@@ -688,16 +691,17 @@ describe('NfRegistry Service w/ Angular testing utils', function () {
                 NfRegistryExplorer,
                 NfRegistryAdministration,
                 NfRegistryUsersAdministration,
-                NfRegistryUserDetails,
-                NfRegistryUserPermissions,
-                NfRegistryUserGroupPermissions,
+                NfRegistryManageUser,
+                NfRegistryManageGroup,
                 NfRegistryBucketPermissions,
                 NfRegistryAddUser,
                 NfRegistryWorkflowAdministration,
                 NfRegistryGridListViewer,
                 NfRegistryBucketGridListViewer,
                 NfRegistryDropletGridListViewer,
-                NfPageNotFoundComponent
+                NfPageNotFoundComponent,
+                NfLoginComponent,
+                NfUserLoginComponent
             ],
             providers: [
                 NfRegistryService,
@@ -963,7 +967,7 @@ describe('NfRegistry Service w/ Angular testing utils', function () {
         expect(nfRegistryService.users[0].identifier).toBe(1);
     });
 
-    it('should execute a `permissions` action on a user.', function () {
+    it('should execute a `manage` action on a user.', function () {
         // from the root injector
         var router = ngCoreTesting.TestBed.get(ngRouter.Router);
 
@@ -975,11 +979,11 @@ describe('NfRegistry Service w/ Angular testing utils', function () {
         var user = {identifier: '999'};
 
         // The function to test
-        nfRegistryService.executeUserAction({name: 'permissions', type: 'sidenav'}, user);
+        nfRegistryService.executeUserAction({name: 'manage', type: 'sidenav'}, user);
 
         //assertions
         var navigateByUrlCall = router.navigateByUrl.calls.first();
-        expect(navigateByUrlCall.args[0]).toBe('/nifi-registry/administration/users(sidenav:user/permissions/999)');
+        expect(navigateByUrlCall.args[0]).toBe('/nifi-registry/administration/users(sidenav:manage/user/999)');
     });
 
     it('should execute a `delete` action on a group.', function () {
@@ -1015,7 +1019,7 @@ describe('NfRegistry Service w/ Angular testing utils', function () {
         expect(nfRegistryService.groups[0].identifier).toBe(1);
     });
 
-    it('should execute a `permissions` action on a group.', function () {
+    it('should execute a `manage` action on a group.', function () {
         // from the root injector
         var router = ngCoreTesting.TestBed.get(ngRouter.Router);
 
@@ -1027,11 +1031,11 @@ describe('NfRegistry Service w/ Angular testing utils', function () {
         var group = {identifier: '999'};
 
         // The function to test
-        nfRegistryService.executeGroupAction({name: 'permissions', type: 'sidenav'}, group);
+        nfRegistryService.executeGroupAction({name: 'manage', type: 'sidenav'}, group);
 
         //assertions
         var navigateByUrlCall = router.navigateByUrl.calls.first();
-        expect(navigateByUrlCall.args[0]).toBe('/nifi-registry/administration/users(sidenav:group/permissions/999)');
+        expect(navigateByUrlCall.args[0]).toBe('/nifi-registry/administration/users(sidenav:manage/group/999)');
     });
 
     it('should filter buckets by name.', function () {

nifi-registry-web-ui/src/main/webapp/systemjs.builder.config.js

@@ -100,17 +100,20 @@
             'nifi-registry/services/nf-registry.service.js': 'services/nf-registry.service.js',
             'nifi-registry/services/nf-storage.service.js': 'services/nf-storage.service.js',
             'nifi-registry/services/nf-registry.auth.service.js': 'services/nf-registry.auth.service.js',
+            'nifi-registry/services/nf-registry.auth-guard.service.js': 'services/nf-registry.auth-guard.service.js',
             'nifi-registry/services/nf-registry.token.interceptor.js': 'services/nf-registry.token.interceptor.js',
             'nifi-registry/components/page-not-found/nf-registry-page-not-found.js': 'components/page-not-found/nf-registry-page-not-found.js',
+            'nifi-registry/components/login/nf-registry-login.js': 'components/login/nf-registry-login.js',
+            'nifi-registry/components/login/dialogs/nf-registry-user-login.js': 'components/login/dialogs/nf-registry-user-login.js',
             'nifi-registry/components/explorer/nf-registry-explorer.js': 'components/explorer/nf-registry-explorer.js',
             'nifi-registry/components/administration/nf-registry-administration.js': 'components/administration/nf-registry-administration.js',
             'nifi-registry/components/administration/users/nf-registry-users-administration.js': 'components/administration/users/nf-registry-users-administration.js',
             'nifi-registry/components/administration/users/dialogs/add-user/nf-registry-add-user.js': 'components/administration/users/dialogs/add-user/nf-registry-add-user.js',
             'nifi-registry/components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js': 'components/administration/users/dialogs/create-new-group/nf-registry-create-new-group.js',
-            'nifi-registry/components/administration/users/dialogs/add-selected-users-to-group/nf-registry-add-selected-users-to-group.js': 'components/administration/users/dialogs/add-selected-users-to-group/nf-registry-add-selected-users-to-group.js',
-            'nifi-registry/components/administration/users/details/nf-registry-user-details.js': 'components/administration/users/details/nf-registry-user-details.js',
-            'nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js': 'components/administration/users/permissions/nf-registry-user-permissions.js',
-            'nifi-registry/components/administration/user-group/permissions/nf-registry-user-group-permissions.js': 'components/administration/user-group/permissions/nf-registry-user-group-permissions.js',
+            'nifi-registry/components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js': 'components/administration/users/dialogs/add-users-to-group/nf-registry-add-users-to-group.js',
+            'nifi-registry/components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js': 'components/administration/users/dialogs/add-user-to-groups/nf-registry-add-user-to-groups.js',
+            'nifi-registry/components/administration/users/sidenav/manage-user/nf-registry-manage-user.js': 'components/administration/users/sidenav/manage-user/nf-registry-manage-user.js',
+            'nifi-registry/components/administration/users/sidenav/manage-group/nf-registry-manage-group.js': 'components/administration/users/sidenav/manage-group/nf-registry-manage-group.js',
             'nifi-registry/components/administration/workflow/dialogs/nf-registry-create-bucket.js': 'components/administration/workflow/dialogs/nf-registry-create-bucket.js',
             'nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js': 'components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js',
             'nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js': 'components/administration/workflow/nf-registry-workflow-administration.js',

nifi-registry-web-ui/src/main/webapp/theming/_structureElements.scss

@@ -16,10 +16,30 @@
  */
 
 body {
-    background: $grey5 url('/nifi-registry/images/registry-logo-web-app.svg') no-repeat center center;
+    background: $grey12 url('/nifi-registry/images/registry-logo-web-app.svg') no-repeat center center;
     background-size: 40%;
 }
 
+#nifi-registry-login-perspective {
+    background: $grey12 url('/nifi-registry/images/registry-logo-web-app.svg') no-repeat center center;
+    background-size: 40%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+}
+
+#nifi-registry-not-found-perspective {
+    background: $grey12 url('/nifi-registry/images/registry-logo-web-app.svg') no-repeat center center;
+    background-size: 40%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+}
+
 #nf-registry-app-container {
     margin: 0;
     width: 100%;
@@ -48,7 +68,7 @@ body {
     background-color: #FFFFFF;
     position: absolute;
     z-index: 1000;
-    background: $grey1;
+    background: $grey11;
 }
 
 #nifi-registry-toolbar .mat-icon-button {
@@ -74,7 +94,7 @@ body {
     min-height: 370px;
     min-width: 1045px;
     overflow: auto;
-    background: $grey5;
+    background: $grey12;
     background-size: 40%;
 }