You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by bb...@apache.org on 2017/11/07 15:14:10 UTC

[4/4] nifi-registry git commit: NIFIREG-40 - Add coasters for notifications to the FDS NgModule. Also upgraded to latest compatible versions of angular, angular material, covalent, and their dependencies

NIFIREG-40 - Add coasters for notifications to the FDS NgModule. Also upgraded to latest compatible versions of angular, angular material, covalent, and their dependencies

This closes #32.

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


Project: http://git-wip-us.apache.org/repos/asf/nifi-registry/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi-registry/commit/f07fd2f5
Tree: http://git-wip-us.apache.org/repos/asf/nifi-registry/tree/f07fd2f5
Diff: http://git-wip-us.apache.org/repos/asf/nifi-registry/diff/f07fd2f5

Branch: refs/heads/master
Commit: f07fd2f5cbcd874b3bd8865f1a726663d3dd0c3d
Parents: 7a050f2
Author: Scott Aslan <sc...@gmail.com>
Authored: Fri Nov 3 15:16:52 2017 -0400
Committer: Bryan Bende <bb...@apache.org>
Committed: Tue Nov 7 10:13:44 2017 -0500

----------------------------------------------------------------------
 nifi-registry-web-ui/pom.xml                    |   66 +
 .../src/main/frontend/package.json              |   28 +-
 .../core/common/styles/_checkboxes.scss         |    2 +-
 .../platform/core/common/styles/_chips.scss     |   10 +-
 .../core/common/styles/_expansionPanels.scss    |    2 +-
 .../core/common/styles/_globalVars.scss         |   10 +-
 .../platform/core/common/styles/_inputs.scss    |   32 +-
 .../platform/core/common/styles/_panels.scss    |   10 +-
 .../platform/core/common/styles/_tables.scss    |    8 +-
 .../core/common/styles/fluid-design-system.scss |    1 +
 .../confirm-dialog.component.html               |    8 +-
 .../core/dialogs/fds-dialog.component.html      |    2 +-
 .../platform/core/dialogs/fds-dialogs.module.js |    8 +-
 .../core/dialogs/services/dialog.service.js     |   24 +-
 .../platform/core/fluid-design-system.module.js |   67 +-
 .../snackbars/coaster/_coaster.component.scss   |   63 +
 .../snackbars/coaster/coaster.component.html    |   33 +
 .../core/snackbars/coaster/coaster.component.js |   70 +
 .../core/snackbars/fds-snackbar.component.html  |   29 +
 .../core/snackbars/fds-snackbar.component.js    |   82 +
 .../core/snackbars/fds-snackbars.module.js      |   87 +
 .../core/snackbars/services/snackbar.service.js |  132 ++
 .../main/resources/filters/registry.properties  |   11 +-
 .../nf-registry-administration.html             |   12 +-
 .../nf-registry-administration.js               |    5 +-
 .../users/add/nf-registry-add-user.html         |    8 +-
 .../users/add/nf-registry-add-user.js           |    5 +-
 .../users/details/nf-registry-user-details.html |    8 +-
 .../users/details/nf-registry-user-details.js   |    5 +-
 .../users/nf-registry-users-administration.html |   42 +-
 .../users/nf-registry-users-administration.js   |    7 +-
 .../nf-registry-user-permissions.html           |    8 +-
 .../permissions/nf-registry-user-permissions.js |    5 +-
 .../nf-registry-bucket-permissions.html         |    8 +-
 .../nf-registry-bucket-permissions.js           |    6 +-
 .../dialogs/nf-registry-create-bucket.html      |   20 +-
 .../dialogs/nf-registry-create-bucket.js        |    5 +-
 .../nf-registry-workflow-administration.html    |   42 +-
 .../nf-registry-workflow-administration.js      |    6 +-
 .../nf-registry-bucket-grid-list-viewer.js      |    8 +-
 .../nf-registry-bucket-grid-list-viewer.spec.js |    1 -
 .../nf-registry-droplet-grid-list-viewer.js     |    8 +-
 ...nf-registry-droplet-grid-list-viewer.spec.js |    1 -
 .../registry/nf-registry-grid-list-viewer.html  |   26 +-
 .../registry/nf-registry-grid-list-viewer.js    |   14 +-
 .../nf-registry-grid-list-viewer.spec.js        |    4 -
 .../components/explorer/nf-registry-explorer.js |   10 +-
 .../explorer/nf-registry-explorer.spec.js       |    3 +
 .../fluid-design-system/fds-demo.html           | 2235 +++++++++---------
 .../components/fluid-design-system/fds-demo.js  |   73 +-
 .../src/main/webapp/nf-registry.html            |   50 +-
 .../src/main/webapp/nf-registry.js              |    5 +-
 .../src/main/webapp/services/nf-registry.api.js |   56 +-
 .../webapp/services/nf-registry.api.spec.js     |  128 +-
 .../main/webapp/services/nf-registry.service.js |  114 +-
 .../webapp/services/nf-registry.service.spec.js |    8 +-
 .../src/main/webapp/systemjs.builder.config.js  |    7 +-
 .../src/main/webapp/systemjs.spec.config.js     |   48 +-
 .../src/main/webapp/theming/_helperClasses.scss |    7 +
 .../main/webapp/theming/_structureElements.scss |    2 +-
 .../users/_structureElements.scss               |    2 +-
 .../workflow/_structureElements.scss            |    2 +-
 62 files changed, 2205 insertions(+), 1584 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/pom.xml
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/pom.xml b/nifi-registry-web-ui/pom.xml
index 56b733e..4f14af7 100644
--- a/nifi-registry-web-ui/pom.xml
+++ b/nifi-registry-web-ui/pom.xml
@@ -207,6 +207,7 @@
                                             @fluid-design-system/dist/platform/core/common/styles/css/*
                                         </include>
                                         <include>@fluid-design-system/dist/platform/core/dialogs/**/*</include>
+                                        <include>@fluid-design-system/dist/platform/core/snackbars/**/*</include>
                                         <include>@fluid-design-system/dist/platform/core/LICENSE.md</include>
                                         <!-- font-awesome -->
                                         <include>font-awesome/css/font-awesome.css</include>
@@ -453,5 +454,70 @@
                 </plugins>
             </build>
         </profile>
+        <profile>
+            <id>development-mode</id>
+            <activation>
+                <activeByDefault>false</activeByDefault>
+            </activation>
+            <properties>
+                <registry.filter>registry.properties</registry.filter>
+            </properties>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-resources-plugin</artifactId>
+                        <executions>
+                            <!--
+                                Stage client side node_modules dependencies for inclusion in .war.
+                            -->
+                            <execution>
+                                <id>copy-development-mode-client-side-deps</id>
+                                <phase>prepare-package</phase>
+                                <goals>
+                                    <goal>copy-resources</goal>
+                                </goals>
+                                <configuration>
+                                    <outputDirectory>${frontend.assets}</outputDirectory>
+                                    <resources>
+                                        <resource>
+                                            <directory>${frontend.working.dir}/node_modules</directory>
+                                            <filtering>false</filtering>
+                                            <includes>
+                                                <include>**/*</include>
+                                            </includes>
+                                        </resource>
+                                    </resources>
+                                </configuration>
+                            </execution>
+                        </executions>
+                    </plugin>
+                    <!--
+                        Speed up build time by excluding node, npm, and any node_modules from `mvn clean` since the front-end-maven plugin uses these
+                        directories as cache.
+                    -->
+                    <plugin>
+                        <groupId>org.apache.maven.plugins</groupId>
+                        <artifactId>maven-clean-plugin</artifactId>
+                        <version>3.0.0</version>
+                        <configuration>
+                            <excludeDefaultDirectories>true</excludeDefaultDirectories>
+                            <filesets>
+                                <fileset>
+                                    <directory>${project.build.directory}</directory>
+                                    <includes>
+                                        <include>**</include>
+                                    </includes>
+                                    <excludes>
+                                        <exclude>frontend-working-directory/node/**/*</exclude>
+                                        <exclude>frontend-working-directory/node_modules/**/*</exclude>
+                                    </excludes>
+                                </fileset>
+                            </filesets>
+                        </configuration>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
     </profiles>
 </project>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/frontend/package.json
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/frontend/package.json b/nifi-registry-web-ui/src/main/frontend/package.json
index b529e09..7320b0e 100644
--- a/nifi-registry-web-ui/src/main/frontend/package.json
+++ b/nifi-registry-web-ui/src/main/frontend/package.json
@@ -14,25 +14,25 @@
     "url": "https://github.com/apache/nifi-registry"
   },
   "dependencies": {
-    "@covalent/core": "1.0.0-beta.6",
+    "@covalent/core": "1.0.0-beta.8-1",
     "angular2-moment": "1.6.0",
     "font-awesome": "4.7.0",
     "moment": "2.18.1",
     "roboto-fontface": "0.7.0"
   },
   "devDependencies": {
-    "@angular/animations": "4.3.4",
-    "@angular/cdk": "2.0.0-beta.8",
-    "@angular/common": "4.3.4",
-    "@angular/compiler": "4.3.4",
-    "@angular/core": "4.3.4",
-    "@angular/flex-layout": "2.0.0-beta.8",
-    "@angular/forms": "4.3.4",
-    "@angular/http": "4.3.4",
-    "@angular/material": "2.0.0-beta.6",
-    "@angular/platform-browser": "4.3.4",
-    "@angular/platform-browser-dynamic": "4.3.4",
-    "@angular/router": "4.3.4",
+    "@angular/animations": "4.4.4",
+    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/common": "4.4.4",
+    "@angular/compiler": "4.4.4",
+    "@angular/core": "4.4.4",
+    "@angular/flex-layout": "2.0.0-beta.9",
+    "@angular/forms": "4.4.4",
+    "@angular/http": "4.4.4",
+    "@angular/material": "2.0.0-beta.12",
+    "@angular/platform-browser": "4.4.4",
+    "@angular/platform-browser-dynamic": "4.4.4",
+    "@angular/router": "4.4.4",
     "canonical-path": "0.0.2",
     "grunt": "0.4.5",
     "grunt-cli": "1.2.0",
@@ -43,7 +43,7 @@
     "jasmine-core": "2.4.1",
     "jquery": "3.2.1",
     "karma": "1.7.0",
-    "karma-chrome-launcher": "2.0.0",
+    "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-coverage": "1.1.1",
     "karma-jasmine": "1.0.2",

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss
index 319995e..4e5aeb2 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss
@@ -17,7 +17,7 @@
 
 /* Checkboxes */
 
-body[fds] md-checkbox {
+body[fds] mat-checkbox {
   margin-bottom: 3px;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss
index 755f678..894fbec 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss
@@ -35,7 +35,7 @@ body[fds] .mat-chip i {
 body[fds] .mat-basic-chip {
   color: $grey2;
   height: 24px;
-  margin: 12px 8px 0 0;
+  margin: 22px 8px 0 0;
 }
 
 body[fds] .mat-basic-chip i {
@@ -46,8 +46,10 @@ body[fds] .mat-basic-chip i {
 
 body[fds] .mat-basic-chip .td-chip {
   font-size: 10px;
-  padding: 0px 0px 7px 12px;
-  min-height: 24px;
+  min-height: unset;
+  line-height: 20px;
+  position: relative;
+  top: -2px;
 }
 
 body[fds] .td-chip span {
@@ -61,7 +63,7 @@ body[fds] .td-chip-disabled .td-chip {
   padding: 0px 0px 0px 12px;
 }
 
-body[fds] .mat-basic-chip md-icon.td-chip-removal {
+body[fds] .mat-basic-chip mat-icon.td-chip-removal {
   font-size: 15px;
   margin-bottom: 7px;
 }

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
index 937bce7..9121c39 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
@@ -36,7 +36,7 @@ body[fds] .md-subhead {
   color: $grey3;
 }
 
-body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content md-icon.td-expand-icon {
+body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content mat-icon.td-expand-icon {
   font-size: 28px;
   color: $blue-grey1;
   font-weight: bold;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
index acd7efb..f43f214 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
@@ -62,11 +62,11 @@ $blue-grey2: #B2C1C6;
 
 /* Set FDS theme */
 
-$primaryColor: $rose1; //$green2 or $blue5
-$primaryColorHover: $rose2; //$green3 or $blue6
-$secondaryColor: $rose1; //$green1 or $blue5
-$accentColor: $blue7; //$orange1 or $blue7
-$accentColorHover: $grey4; //$orange2 or $grey4
+$primaryColor: $rose1; //$green2
+$primaryColorHover: $rose2; //$green3
+$secondaryColor: $rose1; //$green1
+$accentColor: $blue7; //$orange1
+$accentColorHover: $grey4; //$orange2
 $warnColor: $red1;
 $errorColor: $warnColor;
 $warningColor: $accentColor;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss
index 31cf0d4..4ab225a 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss
@@ -64,13 +64,8 @@ body[fds] .mat-input-placeholder {
   font-weight: 300;
 }
 
-body[fds] .mat-input-placeholder-wrapper {
-  top: -20px;
-  padding-top: 33px;
-}
-
 body[fds] .mat-input-placeholder {
-  top: 20px;
+  top: 29px;
   left: 10px;
   white-space: nowrap;
   overflow: hidden;
@@ -78,16 +73,20 @@ body[fds] .mat-input-placeholder {
   width: calc(100% - 44px);
 }
 
-body[fds] md-input-container.mat-focused .mat-input-placeholder {
+body[fds] mat-input-container.mat-focused .mat-input-placeholder {
   transform: translateY(-26px) translateX(-10px) scale(0.75);
 }
 
-body[fds] .mat-input-placeholder.mat-float:not(.mat-empty) {
+body[fds] .mat-form-field-can-float.mat-form-field-should-float .mat-form-field-placeholder {
+  transform: translateY(-26px) translateX(-10px) scale(.75);
+}
+
+body[fds] .mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-placeholder-wrapper .mat-form-field-placeholder {
   transform: translateY(-26px) translateX(-10px) scale(.75);
 }
 
 body[fds] .input-button {
-  top: 3px;
+  top: 5px;
   left: -4px;
   border-left: none !important;
 }
@@ -96,28 +95,15 @@ body[fds] .input-button.mat-raised-button[disabled] {
   opacity: 1;
 }
 
-body[fds] .mat-input-infix {
-  padding: 7px 3px 0px 0px;
-}
-
 body[fds] td-chips .mat-input-placeholder-wrapper::after {
   content: '\f0b0';
   display: inline-table;
   font-family: FontAwesome;
   float: right;
-  margin: 2px 10px 0px 0px;
+  margin: 12px 10px 0px 0px;
   color: $grey3;
 }
 
-body[fds] td-chips input.mat-input-element {
-  border-radius: 2px;
-  color: $grey2;
-  border: 1px solid $grey8;
-  height: 32px;
-  padding: 0px 6px 0px 0px;
-  width: 100%;
-}
-
 body[fds] .mat-hint {
   color: $grey3;
 }

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss
index f88a432..6ead00d 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss
@@ -17,7 +17,7 @@
 
 /* Panels */
 
-body[fds] .mat-card-title {
+body[fds] .md-card-title {
   font-size: 20px;
   color: $grey1;
   margin-bottom: 0px;
@@ -29,20 +29,20 @@ body[fds] md-card-title {
   padding-right: 20px;
 }
 
-body[fds] .mat-card-subtitle {
+body[fds] .md-card-subtitle {
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 10px;
   margin-bottom: 0px;
 }
 
-body[fds] .mat-card-content {
+body[fds] .md-card-content {
   color: $grey2;
   padding: 10px 20px 20px 20px;
   margin: 0px;
 }
 
-body[fds] .mat-card .mat-card-actions:last-child, body[fds] .mat-card .mat-card .mat-card-actions:last-child {
+body[fds] .md-card .md-card-actions:last-child, body[fds] .md-card .md-card .md-card-actions:last-child {
   padding: 0px 20px 20px 20px;
   margin: 0px;
 }
@@ -50,5 +50,5 @@ body[fds] .mat-card .mat-card-actions:last-child, body[fds] .mat-card .mat-card
 body[fds] .fds-panel-menu-button {
   position: absolute;
   right: 0px;
-  top: 20px;
+  z-index: 2;
 }

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss
index 0dcdade..3afa500 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss
@@ -68,10 +68,6 @@ body[fds] .td-data-table-cell .mat-icon-button.badge[disabled] {
   opacity: .3;
 }
 
-// body[fds] .td-data-table-cell .mat-button-focus-overlay, body[fds] .td-data-table-cell .mat-button-ripple {
-//     display: none;
-// }
-
 body[fds] .td-data-table-column {
   font-size: 12px;
   color: $grey3;
@@ -79,8 +75,8 @@ body[fds] .td-data-table-column {
   line-height: 34px;
   padding: 0 28px;
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 
 body[fds] .td-data-table-column .fa-caret-up, body[fds] .td-data-table-column .fa-caret-down {
@@ -93,7 +89,7 @@ body[fds] td-paging-bar {
   color: $grey3;
 }
 
-body[fds] td-paging-bar md-select .mat-select-value, body[fds] td-paging-bar md-select .mat-select-arrow {
+body[fds] td-paging-bar mat-select .mat-select-value, body[fds] td-paging-bar mat-select .mat-select-arrow {
   color: $blue-grey1;
 }
 

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
index 0a29fe8..1ee9b70 100644
--- a/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
@@ -36,6 +36,7 @@
 @import 'menus';
 @import 'tables';
 @import '../../dialogs/fds-dialog-component';
+@import '../../snackbars/coaster/coaster.component';
 // Include the base styles for Angular Material core. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 @include mat-core;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
index 2aab042..efc1b87 100644
--- a/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.html
@@ -19,8 +19,8 @@ limitations under the License.
     <fds-dialog-title *ngIf="title">
         <div fxLayout="row" fxLayoutAlign="space-between center">
             {{title}}
-            <button md-icon-button (click)="cancel()">
-                <md-icon color="primary">close</md-icon>
+            <button mat-icon-button (click)="cancel()">
+                <mat-icon color="primary">close</mat-icon>
             </button>
         </div>
     </fds-dialog-title>
@@ -28,13 +28,13 @@ limitations under the License.
         {{message}}
     </fds-dialog-content>
     <fds-dialog-actions>
-        <button *ngIf="cancelButton" md-raised-button
+        <button *ngIf="cancelButton" mat-raised-button
                 color="{{cancelButtonColor}}"
                 #closeBtn
                 (keydown.arrowright)="acceptBtn.focus()"
                 (click)="cancel()">{{cancelButton}}
         </button>
-        <button *ngIf="acceptButton" md-raised-button
+        <button *ngIf="acceptButton" mat-raised-button
                 color="{{acceptButtonColor}}"
                 #acceptBtn
                 (keydown.arrowleft)="closeBtn.focus()"

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html
index 233bc64..4d39e73 100644
--- a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.component.html
@@ -16,7 +16,7 @@ limitations under the License.
 -->
 
 <div class="fds-dialog-wrapper">
-    <h3 class="fds-dialog-title md-title" *ngIf="dialogTitle.length > 0">
+    <h3 class="fds-dialog-title mat-title" *ngIf="dialogTitle.length > 0">
         <ng-content select="fds-dialog-title"></ng-content>
     </h3>
     <div class="fds-dialog-content pad-bottom-md" *ngIf="dialogContent.length > 0">

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js
index 3b9b610..3758655 100644
--- a/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.module.js
@@ -55,10 +55,10 @@ FdsDialogsModule.annotations = [
             ngFlex.FlexLayoutModule,
             ngForms.FormsModule,
             ngCommon.CommonModule,
-            ngMaterial.MdDialogModule,
-            ngMaterial.MdInputModule,
-            ngMaterial.MdButtonModule,
-            ngMaterial.MdIconModule
+            ngMaterial.MatDialogModule,
+            ngMaterial.MatInputModule,
+            ngMaterial.MatButtonModule,
+            ngMaterial.MatIconModule
         ],
         declarations: [
             FDS_DIALOGS

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js
index 06ecf43..9bf1ee9 100644
--- a/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js
@@ -20,7 +20,7 @@ var ngMaterial = require('@angular/material');
 var FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component');
 
 var IDialogConfig = new ngCore.Class({
-    extends: ngMaterial.MdDialogConfig,
+    extends: ngMaterial.MatDialogConfig,
     constructor: function () {
         this.title = '';
         this.message = '';
@@ -50,30 +50,31 @@ function createConfig(config) {
 /**
  * FdsDialogService constructor.
  *
- * @param MdDialog      The angular material MdDialog.
+ * @param MatDialog      The angular material MatDialog.
  * @constructor
  */
-function FdsDialogService(MdDialog) {
-    this.dialogService = MdDialog;
+function FdsDialogService(MatDialog) {
+    this.dialogService = MatDialog;
 }
 
 FdsDialogService.prototype = {
     contstructor: FdsDialogService,
 
     /**
-     * Wrapper function over the open() method in MdDialog.
+     * Wrapper function over the open() method in MatDialog.
      * Opens a modal dialog containing the given component.
      *
      * @param component     The angular ComponentType<T>.
-     * @param config        The angular material MdDialogConfig.
+     * @param config        The angular material MatDialogConfig.
      *
+     * @returns {MatDialoRef}    The reference to the dialog.
      */
     open: function (component, config) {
         return this.dialogService.open(component, config);
     },
 
     /**
-     * Wrapper function over the closeAll() method in MdDialog.
+     * Wrapper function over the closeAll() method in MatDialog.
      * Closes all of the currently-open dialogs.
      */
     closeAll: function () {
@@ -82,17 +83,20 @@ FdsDialogService.prototype = {
 
     /**
      * Opens a confirm dialog with the provided config.
-     * Returns an MdDialogRef<TdConfirmDialogComponent> object.
      *
      * @param config     IConfirmConfig {
-     *                                      message: string;
+     *                                      message?: string;
      *                                      title?: string;
+     *                                      dialogRef?: MatDialoRef;
      *                                      viewContainerRef?: ViewContainerRef;
+     *                                      disableClose?: boolean;
      *                                      acceptButton?: string;
      *                                      acceptButtonColor?: string;
      *                                      cancelButton?: string;
      *                                      cancelButtonColor?: string;
      *                                   }
+     *
+     * @returns {MatDialoRef}    The reference to the dialog.
      */
     openConfirm: function (config) {
         var dialogConfig = createConfig(config);
@@ -121,7 +125,7 @@ FdsDialogService.prototype = {
     },
 }
 
-FdsDialogService.parameters = [ngMaterial.MdDialog];
+FdsDialogService.parameters = [ngMaterial.MatDialog];
 
 module.exports = {
     IDialogConfig: IDialogConfig,

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/fluid-design-system.module.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/fluid-design-system.module.js b/nifi-registry-web-ui/src/main/platform/core/fluid-design-system.module.js
index 2cc3e0f..7a7aaec 100644
--- a/nifi-registry-web-ui/src/main/platform/core/fluid-design-system.module.js
+++ b/nifi-registry-web-ui/src/main/platform/core/fluid-design-system.module.js
@@ -24,6 +24,7 @@ var ngPlatformBrowser = require('@angular/platform-browser');
 var ngAnimations = require('@angular/platform-browser/animations');
 var covalentCore = require('@covalent/core');
 var fdsDialogsModule = require('@fluid-design-system/dialogs');
+var fdsSnackBarsModule = require('@fluid-design-system/snackbars');
 
 /**
  * FluidDesignSystemModule constructor.
@@ -56,12 +57,42 @@ FluidDesignSystemModule.annotations = [
             ngAnimations.BrowserAnimationsModule,
             ngCommon.CommonModule,
             ngPlatformBrowser.BrowserModule,
-            ngMaterial.MaterialModule,
+            ngMaterial.MatAutocompleteModule,
+            ngMaterial.MatButtonModule,
+            ngMaterial.MatButtonToggleModule,
+            ngMaterial.MatCardModule,
+            ngMaterial.MatCheckboxModule,
+            ngMaterial.MatChipsModule,
+            ngMaterial.MatDatepickerModule,
+            ngMaterial.MatDialogModule,
+            ngMaterial.MatExpansionModule,
+            ngMaterial.MatFormFieldModule,
+            ngMaterial.MatGridListModule,
+            ngMaterial.MatIconModule,
+            ngMaterial.MatInputModule,
+            ngMaterial.MatListModule,
+            ngMaterial.MatMenuModule,
+            ngMaterial.MatProgressBarModule,
+            ngMaterial.MatProgressSpinnerModule,
+            ngMaterial.MatRadioModule,
+            ngMaterial.MatSelectModule,
+            ngMaterial.MatSlideToggleModule,
+            ngMaterial.MatSliderModule,
+            ngMaterial.MatSidenavModule,
+            ngMaterial.MatSnackBarModule,
+            ngMaterial.MatStepperModule,
+            ngMaterial.MatTabsModule,
+            ngMaterial.MatToolbarModule,
+            ngMaterial.MatTooltipModule,
+            ngMaterial.MatPaginatorModule,
+            ngMaterial.MatSortModule,
+            ngMaterial.MatTableModule,
             covalentCore.CovalentCommonModule,
             covalentCore.CovalentChipsModule,
             covalentCore.CovalentDataTableModule,
             covalentCore.CovalentDialogsModule,
             fdsDialogsModule.FdsDialogsModule,
+            fdsSnackBarsModule.FdsSnackBarsModule,
             covalentCore.CovalentExpansionPanelModule,
             covalentCore.CovalentLoadingModule,
             covalentCore.CovalentMenuModule,
@@ -75,12 +106,42 @@ FluidDesignSystemModule.annotations = [
             ngAnimations.BrowserAnimationsModule,
             ngCommon.CommonModule,
             ngPlatformBrowser.BrowserModule,
-            ngMaterial.MaterialModule,
+            ngMaterial.MatAutocompleteModule,
+            ngMaterial.MatButtonModule,
+            ngMaterial.MatButtonToggleModule,
+            ngMaterial.MatCardModule,
+            ngMaterial.MatCheckboxModule,
+            ngMaterial.MatChipsModule,
+            ngMaterial.MatDatepickerModule,
+            ngMaterial.MatDialogModule,
+            ngMaterial.MatExpansionModule,
+            ngMaterial.MatFormFieldModule,
+            ngMaterial.MatGridListModule,
+            ngMaterial.MatIconModule,
+            ngMaterial.MatInputModule,
+            ngMaterial.MatListModule,
+            ngMaterial.MatMenuModule,
+            ngMaterial.MatProgressBarModule,
+            ngMaterial.MatProgressSpinnerModule,
+            ngMaterial.MatRadioModule,
+            ngMaterial.MatSelectModule,
+            ngMaterial.MatSlideToggleModule,
+            ngMaterial.MatSliderModule,
+            ngMaterial.MatSidenavModule,
+            ngMaterial.MatSnackBarModule,
+            ngMaterial.MatStepperModule,
+            ngMaterial.MatTabsModule,
+            ngMaterial.MatToolbarModule,
+            ngMaterial.MatTooltipModule,
+            ngMaterial.MatPaginatorModule,
+            ngMaterial.MatSortModule,
+            ngMaterial.MatTableModule,
             covalentCore.CovalentCommonModule,
             covalentCore.CovalentChipsModule,
             covalentCore.CovalentDataTableModule,
             covalentCore.CovalentDialogsModule,
             fdsDialogsModule.FdsDialogsModule,
+            fdsSnackBarsModule.FdsSnackBarsModule,
             covalentCore.CovalentExpansionPanelModule,
             covalentCore.CovalentLoadingModule,
             covalentCore.CovalentMenuModule,
@@ -91,4 +152,4 @@ FluidDesignSystemModule.annotations = [
         ]
     })
 ];
-module.exports = FluidDesignSystemModule;
\ No newline at end of file
+module.exports = FluidDesignSystemModule;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/_coaster.component.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/_coaster.component.scss b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/_coaster.component.scss
new file mode 100644
index 0000000..b207c8d
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/_coaster.component.scss
@@ -0,0 +1,63 @@
+/*
+ * 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.
+ */
+
+body[fds] snack-bar-container {
+  background: #FFFFFF;
+  padding: 0;
+  box-shadow: 0px 0px 3px 0px rgba(19, 145, 193, 1);
+}
+
+fds-snackbar-title mat-icon.mat-icon.mat-primary.material-icons {
+  font-size: 10px;
+  height: 10px;
+  width: 10px;
+  line-height: 10px;
+  color: $grey3;
+}
+
+.fds-coaster-message {
+  font-size: 12px;
+}
+
+.fds-snackbar-title {
+  font-size: 14px;
+}
+
+.fds-snackbar-title i {
+  font-size: 24px;
+}
+
+.fds-coaster-icon {
+  position: absolute;
+  top: 24px;
+  left: 15px;
+}
+
+.coaster-close-icon {
+  height: 10px !important;
+  width: 10px !important;
+  line-height: 10px !important;
+  right: 10px;
+  position: absolute !important;
+  top: 10px;
+}
+
+.fds-snackbar-wrapper {
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.html b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.html
new file mode 100644
index 0000000..8b8414b
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.html
@@ -0,0 +1,33 @@
+<!--
+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.
+-->
+
+<fds-snackbar>
+    <fds-snackbar-title *ngIf="title">
+        <button class="coaster-close-icon" mat-icon-button (click)="cancel()">
+            <mat-icon color="primary">close</mat-icon>
+        </button>
+        <i *ngIf="icon" class="{{icon}} fds-coaster-icon" aria-hidden="true"></i>
+        <div class="ellipsis" fxLayout="row" title="{{title}}" fxLayoutAlign="space-between center">
+            {{title}}
+        </div>
+    </fds-snackbar-title>
+    <fds-snackbar-content title="{{message}}" class="fds-coaster-message ellipsis tc-grey-700">
+        {{message}}
+    </fds-snackbar-content>
+    <fds-snackbar-actions>
+    </fds-snackbar-actions>
+</fds-snackbar>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.js b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.js
new file mode 100644
index 0000000..0213f2e
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/coaster/coaster.component.js
@@ -0,0 +1,70 @@
+/*
+ * 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 $ = require('jquery');
+
+/**
+ * FdsCoasterComponent constructor.
+ *
+ * @constructor
+ */
+function FdsCoasterComponent() {
+    this.title = '';
+    this.message = '';
+    this.icon = '';
+    this.color = '';
+    this.snackBarRef = undefined;
+    this.viewContainerRef = undefined;
+};
+
+FdsCoasterComponent.prototype = {
+    constructor: FdsCoasterComponent,
+
+    /**
+     * Initialize the component.
+     */
+    ngAfterViewChecked: function () {
+        $('.fds-snackbar-wrapper').css('border-color', this.color);
+        $('.fds-snackbar-title').css('color', this.color);
+        $('.fds-coaster-icon').css('color', this.color);
+
+        if (this.icon) {
+            $('.fds-snackbar-wrapper').css('padding', '15px 15px 15px 45px');
+        } else {
+            $('.fds-snackbar-wrapper').css('padding', '15px 15px 15px 15px');
+        }
+    },
+
+    /**
+     * Close the snackbar and send a cancel response to any subscribers.
+     */
+    cancel: function () {
+        this.snackBarRef.dismiss(false);
+    }
+};
+
+FdsCoasterComponent.annotations = [
+    new ngCore.Component({
+        selector: 'fds-coaster',
+        template: require('./coaster.component.html!text')
+    })
+];
+
+FdsCoasterComponent.parameters = [];
+
+module.exports = FdsCoasterComponent;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.html b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.html
new file mode 100644
index 0000000..f3c6def
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.html
@@ -0,0 +1,29 @@
+<!--
+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 class="fds-snackbar-wrapper">
+    <div class="fds-snackbar-title md-title" *ngIf="snackBarTitle.length > 0">
+        <ng-content select="fds-snackbar-title"></ng-content>
+    </div>
+    <div class="fds-snackbar-content" *ngIf="snackBarContent.length > 0">
+        <ng-content select="fds-snackbar-content"></ng-content>
+    </div>
+    <div class="fds-snackbar-actions" *ngIf="snackBarActions.length > 0" layout="row">
+        <span flex></span>
+        <ng-content select="fds-snackbar-actions"></ng-content>
+    </div>
+</div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.js b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.js
new file mode 100644
index 0000000..40c50c1
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbar.component.js
@@ -0,0 +1,82 @@
+/*
+ * 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 FdsSnackBarTitleDirective = new ngCore.Class({
+    extends: ngCore.Directive({selector: 'fds-snackbar-title'}),
+    constructor: function () {
+    }
+});
+var FdsSnackBarContentDirective = new ngCore.Class({
+    extends: ngCore.Directive({selector: 'fds-snackbar-content'}),
+    constructor: function () {
+    }
+});
+var FdsSnackBarActionsDirective = new ngCore.Class({
+    extends: ngCore.Directive({selector: 'fds-snackbar-actions'}),
+    constructor: function () {
+    }
+});
+
+/**
+ * FdsSnackBarComponent constructor
+ *
+ * @constructor
+ */
+function FdsSnackBarComponent() {
+};
+
+FdsSnackBarComponent.prototype = {
+    constructor: FdsSnackBarComponent,
+
+    /**
+     * Respond after Angular projects external content into the component's view.
+     */
+    ngAfterContentInit: function () {
+        if (this.snackBarTitle.length > 1) {
+            throw new Error('Duplicate fds-snackbar-title component at in fds-snackbar.');
+        }
+        if (this.snackBarContent.length > 1) {
+            throw new Error('Duplicate fds-snackbar-content component at in fds-snackbar.');
+        }
+        if (this.snackBarActions.length > 1) {
+            throw new Error('Duplicate fds-snackbar-actions component at in fds-snackbar.');
+        }
+    }
+}
+
+FdsSnackBarComponent.annotations = [
+    new ngCore.Component({
+        selector: 'fds-snackbar',
+        template: require('./fds-snackbar.component.html!text'),
+        queries: {
+            snackBarTitle: new ngCore.ContentChildren(FdsSnackBarTitleDirective),
+            snackBarContent: new ngCore.ContentChildren(FdsSnackBarContentDirective),
+            snackBarActions: new ngCore.ContentChildren(FdsSnackBarActionsDirective)
+        }
+    })
+];
+
+FdsSnackBarComponent.parameters = [];
+
+module.exports = {
+    FdsSnackBarTitleDirective: FdsSnackBarTitleDirective,
+    FdsSnackBarContentDirective: FdsSnackBarContentDirective,
+    FdsSnackBarActionsDirective: FdsSnackBarActionsDirective,
+    FdsSnackBarComponent: FdsSnackBarComponent
+};
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbars.module.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbars.module.js b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbars.module.js
new file mode 100644
index 0000000..657b1ae
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/fds-snackbars.module.js
@@ -0,0 +1,87 @@
+/*
+ * 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 ngMaterial = require('@angular/material');
+var ngFlex = require('@angular/flex-layout');
+var ngCommon = require('@angular/common');
+var ngForms = require('@angular/forms');
+var fdsSnackBarComponentModule = require('@fluid-design-system/snackbar-component');
+var fdsSnackBarServiceModule = require('@fluid-design-system/snackbar-service');
+var FdsCoasterComponent = require('@fluid-design-system/coaster-component');
+
+var FDS_SNACKBARS = [
+    fdsSnackBarComponentModule.FdsSnackBarComponent,
+    fdsSnackBarComponentModule.FdsSnackBarTitleDirective,
+    fdsSnackBarComponentModule.FdsSnackBarActionsDirective,
+    fdsSnackBarComponentModule.FdsSnackBarContentDirective,
+    FdsCoasterComponent
+];
+
+var FDS_SNACKBARS_ENTRY_COMPONENTS = [
+    FdsCoasterComponent
+];
+
+/**
+ * FdsSnackBarsModule constructor.
+ *
+ * @constructor
+ */
+function FdsSnackBarsModule() {
+
+};
+
+FdsSnackBarsModule.prototype = {
+    constructor: FdsSnackBarsModule
+};
+
+FdsSnackBarsModule.annotations = [
+    new ngCore.NgModule({
+        imports: [
+            ngFlex.FlexLayoutModule,
+            ngForms.FormsModule,
+            ngCommon.CommonModule,
+            ngMaterial.MatSnackBarModule,
+            ngMaterial.MatInputModule,
+            ngMaterial.MatButtonModule,
+            ngMaterial.MatIconModule
+        ],
+        declarations: [
+            FDS_SNACKBARS
+        ],
+        exports: [
+            FDS_SNACKBARS
+        ],
+        providers: [
+            fdsSnackBarServiceModule.FdsSnackBarService
+        ],
+        entryComponents: [
+            FDS_SNACKBARS_ENTRY_COMPONENTS
+        ]
+    })
+];
+
+module.exports = {
+    FdsSnackBarsModule: FdsSnackBarsModule,
+    ICoasterConfig: fdsSnackBarServiceModule.ICoasterConfig,
+    FdsSnackBarService: fdsSnackBarServiceModule.FdsSnackBarService,
+    FdsSnackBarComponent: fdsSnackBarComponentModule.FdsSnackBarComponent,
+    FdsSnackBarTitleDirective: fdsSnackBarComponentModule.FdsSnackBarTitleDirective,
+    FdsSnackBarContentDirective: fdsSnackBarComponentModule.FdsSnackBarContentDirective,
+    FdsSnackBarActionsDirective: fdsSnackBarComponentModule.FdsSnackBarActionsDirective,
+    FdsCoasterComponent: FdsCoasterComponent
+};

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/platform/core/snackbars/services/snackbar.service.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/snackbars/services/snackbar.service.js b/nifi-registry-web-ui/src/main/platform/core/snackbars/services/snackbar.service.js
new file mode 100644
index 0000000..433db11
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/snackbars/services/snackbar.service.js
@@ -0,0 +1,132 @@
+/*
+ * 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 ngMaterial = require('@angular/material');
+var FdsCoasterComponent = require('@fluid-design-system/coaster-component');
+var $ = require('jquery');
+
+var ISnackBarConfig = new ngCore.Class({
+    extends: ngMaterial.MatSnackBarConfig,
+    constructor: function () {
+        this.title = '';
+        this.message = '';
+        this.snackBarRef = undefined;
+        this.viewContainerRef = undefined;
+    }
+});
+
+var ICoasterConfig = new ngCore.Class({
+    extends: ISnackBarConfig,
+    constructor: function () {
+        this.icon = '';
+        this.color = '';
+    }
+});
+
+/**
+ * FdsSnackBarService constructor.
+ *
+ * @param MatSnackBar      The angular material MatSnackBar.
+ * @constructor
+ */
+function FdsSnackBarService(MatSnackBar) {
+    this.snackBarService = MatSnackBar;
+}
+
+FdsSnackBarService.prototype = {
+    contstructor: FdsSnackBarService,
+
+    /**
+     * Wrapper function over the open() method in MatSnackBar.
+     *
+     * @param message               The message to show in the snackbar.
+     * @param action                The label for the snackbar action.
+     * @param config                Additional configuration options for the snackbar.
+     *
+     * @returns {MatSnackBarRef}    The reference to the snackbar.
+     */
+    open: function (message, action, config) {
+        return this.snackBarService.open(message, action, config);
+    },
+
+    /**
+     * Wrapper function over the openFromComponent() method in MatSnackBar.
+     * Opens a snackbar containing the given component.
+     *
+     * @param component     The angular ComponentType<T>.
+     * @param config        The angular material MatSnackBarConfig.
+     *
+     * @returns {MatSnackBarRef}    The reference to the snackbar.
+     */
+    openFromComponent: function (component, config) {
+        return this.snackBarService.openFromComponent(component, config);
+    },
+
+    /**
+     * Wrapper function over the dismiss() method in MatSnackBar.
+     * Dismisses the currently-open snackbar.
+     */
+    dismiss: function () {
+        this.snackBarService.dismiss();
+    },
+
+    /**
+     * Opens a coaster snackbar with the provided config.
+     *
+     * @param config     ICoasterConfig {
+     *                                      message?: string;
+     *                                      title?: string;
+     *                                      snackBarRef?: MatSnackBarRef;
+     *                                      viewContainerRef?: ViewContainerRef;
+     *                                      icon?: string;
+     *                                      color?: string;
+     *                                   }
+     *
+     * @returns {MatSnackBarRef}    The reference to the snackbar.
+     */
+    openCoaster: function (config) {
+        var snackBarConfig = new ICoasterConfig();
+        snackBarConfig.verticalPosition = config.verticalPosition;
+        snackBarConfig.horizontalPosition = config.horizontalPosition;
+        snackBarConfig.duration = config.duration;
+        var snackBarRef = this.snackBarService.openFromComponent(FdsCoasterComponent, snackBarConfig);
+        var coasterComponent = snackBarRef.instance;
+        coasterComponent.snackBarRef = snackBarRef;
+        if (config.title) {
+            coasterComponent.title = config.title;
+        }
+        if (config.message) {
+            coasterComponent.message = config.message;
+        }
+        if (config.icon) {
+            coasterComponent.icon = config.icon;
+        }
+        if (config.color) {
+            coasterComponent.color = config.color;
+        }
+        return snackBarRef;
+    },
+}
+
+FdsSnackBarService.parameters = [ngMaterial.MatSnackBar];
+
+module.exports = {
+    ISnackBarConfig: ISnackBarConfig,
+    ICoasterConfig: ICoasterConfig,
+    FdsSnackBarService: FdsSnackBarService
+};
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/resources/filters/registry.properties
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/resources/filters/registry.properties b/nifi-registry-web-ui/src/main/resources/filters/registry.properties
index 60ce777..710aaff 100644
--- a/nifi-registry-web-ui/src/main/resources/filters/registry.properties
+++ b/nifi-registry-web-ui/src/main/resources/filters/registry.properties
@@ -13,11 +13,14 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
-nf.registry.script.tags=<script src="nifi-registry/systemjs.spec.config.js?${project.version}"></script>\n\
+nf.registry.script.tags=<script src="nifi-registry/node_modules/systemjs/dist/system.src.js"></script>\n\
+<script src="nifi-registry/systemjs.spec.config.js?${project.version}"></script>\n\
 <script>\n\
 // bootstrap the app\n\
-System.import('nifi-registry/nf-registry-bootstrap.js?${project.version}');\n\
+System.import('nifi-registry/nf-registry-bootstrap.js?${project.version}').catch(function(err) {\n\
+console.error(err);\n\
+});\n\
 </script>
 nf.registry.style.tags=<link rel="stylesheet" href="nifi-registry/node_modules/@covalent/core/common/platform.css?${project.version}">\n\
-<link rel="stylesheet" href='nifi-registry/node_modules/@fluid-design-system/dist/platform/core/common/styles/css/fluid-design-system.css?${project.version}'/>\n\
-<link rel="stylesheet" href='nifi-registry/css/nf-registry.css?${project.version}'/>
\ No newline at end of file
+<link rel="stylesheet" href='nifi-registry/node_modules/@fluid-design-system/dist/platform/core/common/styles/css/fluid-design-system.min.css?${project.version}'/>\n\
+<link rel="stylesheet" href='nifi-registry/css/nf-registry.min.css?${project.version}'/>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html b/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html
index edafcaf..73c78e1 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.html
@@ -16,19 +16,19 @@ limitations under the License.
 -->
 
 <div id="nifi-registry-administration-perspective">
-    <md-button-toggle-group name="nifi-registry-administration-perspective" fxLayout="row"
+    <mat-button-toggle-group name="nifi-registry-administration-perspective" fxLayout="row"
                             fxLayoutAlign="space-between center" class="tab-toggle-group">
-        <md-button-toggle [checked]="nfRegistryService.adminPerspective === 'users'" value="users" class="uppercase"
+        <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">
             Users
-        </md-button-toggle>
-        <md-button-toggle [checked]="nfRegistryService.adminPerspective === 'workflow'" value="workflow"
+        </mat-button-toggle>
+        <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">
             Buckets
-        </md-button-toggle>
-    </md-button-toggle-group>
+        </mat-button-toggle>
+    </mat-button-toggle-group>
 </div>
 <router-outlet></router-outlet>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js b/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
index 5285b40..3a8376e 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/nf-registry-administration.js
@@ -62,6 +62,9 @@ NfRegistryAdministration.annotations = [
     })
 ];
 
-NfRegistryAdministration.parameters = [NfRegistryService, ngRouter.ActivatedRoute];
+NfRegistryAdministration.parameters = [
+    NfRegistryService,
+    ngRouter.ActivatedRoute
+];
 
 module.exports = NfRegistryAdministration;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.html b/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.html
index 6cdf631..c605fde 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.html
@@ -17,12 +17,12 @@ 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="mat-card-title">Add User</span>
-        <button md-icon-button (click)="closeSideNav()">
-            <md-icon color="primary">close</md-icon>
+        <span class="md-card-title">Add User</span>
+        <button mat-icon-button (click)="closeSideNav()">
+            <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
-    <button id="nf-registry-add-user-side-nav-container" md-raised-button color="fds-primary" (click)="closeSideNav()">
+    <button id="nf-registry-add-user-side-nav-container" mat-raised-button color="fds-primary" (click)="closeSideNav()">
         Close
     </button>
 </div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.js b/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.js
index c4ef909..0688fd8 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/add/nf-registry-add-user.js
@@ -61,6 +61,9 @@ NfRegistryAddUser.annotations = [
     })
 ];
 
-NfRegistryAddUser.parameters = [NfRegistryService, ngRouter.Router];
+NfRegistryAddUser.parameters = [
+    NfRegistryService,
+    ngRouter.Router
+];
 
 module.exports = NfRegistryAddUser;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.html b/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.html
index 49dd37e..0329093 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.html
@@ -17,12 +17,12 @@ 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="mat-card-title">User Details</span>
-        <button md-icon-button (click)="closeSideNav()">
-            <md-icon color="primary">close</md-icon>
+        <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" md-raised-button color="fds-primary"
+    <button id="nf-registry-user-details-side-nav-container" mat-raised-button color="fds-primary"
             (click)="closeSideNav()">Close
     </button>
 </div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js b/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js
index 6b04b95..ba676b3 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/details/nf-registry-user-details.js
@@ -61,6 +61,9 @@ NfRegistryUserDetails.annotations = [
     })
 ];
 
-NfRegistryUserDetails.parameters = [NfRegistryService, ngRouter.Router];
+NfRegistryUserDetails.parameters = [
+    NfRegistryService,
+    ngRouter.Router
+];
 
 module.exports = NfRegistryUserDetails;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html b/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
index 5516901..bbff1cb 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.html
@@ -17,22 +17,22 @@ limitations under the License.
 
 <div id="nifi-registry-users-administration-perspective" class="mat-elevation-z5">
     <div fxFlex class="pad-top-md pad-bottom-sm pad-left-md pad-right-md">
-        <span class="mat-card-title">Authorized Users ({{nfRegistryService.users.length}})</span>
+        <span class="md-card-title">Authorized Users ({{nfRegistryService.users.length}})</span>
         <div flex class="push-right-sm" fxLayout="row" fxLayoutAlign="end center">
             <td-chips class="push-right-sm" [items]="nfRegistryService.autoCompleteUsers" (add)="nfRegistryService.usersSearchAdd($event)"
                       (remove)="nfRegistryService.usersSearchRemove($event)"></td-chips>
-            <button class="push-right-sm" color="fds-secondary" md-raised-button (click)="execute({name: 'add'})">
+            <button class="push-top-sm push-right-sm" color="fds-secondary" mat-raised-button (click)="execute({name: 'add'})">
                 Add User
             </button>
-            <button color="fds-primary" md-raised-button [mdMenuTriggerFor]="userActionMenu">
+            <button class="push-top-sm" color="fds-primary" mat-raised-button [matMenuTriggerFor]="userActionMenu">
                 Actions<i class="fa fa-caret-down" aria-hidden="true"></i>
             </button>
         </div>
-        <md-menu class="fds-primary-dropdown-button-menu" #userActionMenu="mdMenu" [overlapTrigger]="false">
-            <button md-menu-item> Need to loop over and provide list of all actions available to all currently selected
+        <mat-menu class="fds-primary-dropdown-button-menu" #userActionMenu="matMenu" [overlapTrigger]="false">
+            <button mat-menu-item> Need to loop over and provide list of all actions available to all currently selected
                 users
             </button>
-        </md-menu>
+        </mat-menu>
         <div id="nifi-registry-users-administration-list-container-column-header" fxLayout="row"
              fxLayoutAlign="space-between center" class="td-data-table">
             <div class="td-data-table-column" (click)="nfRegistryService.sortUsers($event, column)"
@@ -46,9 +46,9 @@ limitations under the License.
             </div>
             <div class="td-data-table-column">
                 <div fxLayout="row" fxLayoutAlign="end center">
-                    <md-checkbox class="pad-left-sm" [(ngModel)]="nfRegistryService.allUsersSelected"
+                    <mat-checkbox class="pad-left-sm" [(ngModel)]="nfRegistryService.allUsersSelected"
                                  (checked)="nfRegistryService.allUsersSelected"
-                                 (change)="nfRegistryService.toggleUsersSelectAll()"></md-checkbox>
+                                 (change)="nfRegistryService.toggleUsersSelectAll()"></mat-checkbox>
                 </div>
             </div>
         </div>
@@ -70,42 +70,42 @@ limitations under the License.
                     <div *ngIf="row.actions">
                         <div *ngIf="row.actions.length <= 4" fxLayout="row" fxLayoutAlign="end center">
                             <button (click)="execute(action, row)" *ngFor="let action of row.actions"
-                                    mdTooltip="{{action.tooltip}}" md-icon-button color="accent"
+                                    matTooltip="{{action.tooltip}}" mat-icon-button color="accent"
                                     [disabled]="action.disabled ? '' : null">
                                 <i class="{{action.icon}}" aria-hidden="true"></i>
                             </button>
-                            <md-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
+                            <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
                                          (change)="nfRegistryService.toggleUserSelect(row)"
-                                         (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></md-checkbox>
+                                         (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></mat-checkbox>
                         </div>
                         <div *ngIf="row.actions.length > 4" fxLayout="row" fxLayoutAlign="end center">
-                            <button (click)="row.checked = !row.checked" mdTooltip="Actions" md-icon-button
-                                    [mdMenuTriggerFor]="userTableActionMenu">
+                            <button (click)="row.checked = !row.checked" matTooltip="Actions" mat-icon-button
+                                    [matMenuTriggerFor]="userTableActionMenu">
                                 <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
                             </button>
-                            <md-menu #userTableActionMenu="mdMenu" [overlapTrigger]="false">
+                            <mat-menu #userTableActionMenu="matMenu" [overlapTrigger]="false">
                                 <button (click)="execute(action, row)" *ngFor="let action of row.actions"
-                                        mdTooltip="{{action.tooltip}}" md-menu-item
+                                        matTooltip="{{action.tooltip}}" mat-menu-item
                                         [disabled]="action.disabled ? '' : null"
                                         (click)="nfRegistryService.sidenav.toggle()">
                                     <i class="{{action.icon}}" aria-hidden="true"></i>
                                     <span>{{action.name}}</span>
                                 </button>
-                            </md-menu>
-                            <md-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
+                            </mat-menu>
+                            <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
                                          (change)="nfRegistryService.toggleUserSelect(row)"
-                                         (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></md-checkbox>
+                                         (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></mat-checkbox>
                         </div>
                     </div>
                     <div *ngIf="!row.actions" fxLayout="row" fxLayoutAlign="end center">
-                        <md-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
+                        <mat-checkbox class="pad-left-sm" [(ngModel)]="row.checked" [checked]="row.checked"
                                      (change)="nfRegistryService.toggleUserSelect(row)"
-                                     (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></md-checkbox>
+                                     (click)="row.checked = !row.checked;nfRegistryService.toggleUserSelect(row)"></mat-checkbox>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="md-padding" *ngIf="!nfRegistryService.filteredUsers.length > 0" layout="row"
+        <div class="mat-padding" *ngIf="!nfRegistryService.filteredUsers.length > 0" layout="row"
              layout-align="center center">
             <h3>No results to display.</h3>
         </div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js b/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
index 32cf758..54e5abb 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/nf-registry-users-administration.js
@@ -124,6 +124,11 @@ NfRegistryUsersAdministration.annotations = [
     })
 ];
 
-NfRegistryUsersAdministration.parameters = [NfRegistryService, ngRouter.ActivatedRoute, ngRouter.Router, fdsDialogsModule.FdsDialogService];
+NfRegistryUsersAdministration.parameters = [
+    NfRegistryService,
+    ngRouter.ActivatedRoute,
+    ngRouter.Router,
+    fdsDialogsModule.FdsDialogService
+];
 
 module.exports = NfRegistryUsersAdministration;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.html b/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.html
index 1554821..d92ed6b 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.html
@@ -17,12 +17,12 @@ 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="mat-card-title">User Permissions</span>
-        <button md-icon-button (click)="closeSideNav()">
-            <md-icon color="primary">close</md-icon>
+        <span class="md-card-title">User Permissions</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" md-raised-button color="fds-primary"
+    <button id="nf-registry-user-permissions-side-nav-container" mat-raised-button color="fds-primary"
             (click)="closeSideNav()">Close
     </button>
 </div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.js b/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.js
index 66f92cb..cb6d17c 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/users/permissions/nf-registry-user-permissions.js
@@ -61,6 +61,9 @@ NfRegistryUserPermissions.annotations = [
     })
 ];
 
-NfRegistryUserPermissions.parameters = [NfRegistryService, ngRouter.Router];
+NfRegistryUserPermissions.parameters = [
+    NfRegistryService,
+    ngRouter.Router
+];
 
 module.exports = NfRegistryUserPermissions;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html
index 648987d..4c46910 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.html
@@ -17,12 +17,12 @@ 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 *ngIf="nfRegistryService.bucket.identifier" class="mat-card-title">{{nfRegistryService.bucket.name}}</span>
-        <button md-icon-button (click)="closeSideNav()">
-            <md-icon color="primary">close</md-icon>
+        <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>
-    <button id="nf-registry-workflow-bucket-permissions-side-nav-container" md-raised-button color="fds-primary"
+    <button id="nf-registry-workflow-bucket-permissions-side-nav-container" mat-raised-button color="fds-primary"
             (click)="closeSideNav()">Close
     </button>
 </div>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js
index 6dbb0c9..726398b 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js
@@ -72,6 +72,10 @@ NfRegistryBucketPermissions.annotations = [
     })
 ];
 
-NfRegistryBucketPermissions.parameters = [NfRegistryService, ngRouter.ActivatedRoute, ngRouter.Router];
+NfRegistryBucketPermissions.parameters = [
+    NfRegistryService,
+    ngRouter.ActivatedRoute,
+    ngRouter.Router
+];
 
 module.exports = NfRegistryBucketPermissions;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.html b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.html
index 02cfbc7..0c1d87e 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.html
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.html
@@ -17,28 +17,28 @@ limitations under the License.
 
 <div id="nifi-registry-admin-create-bucket-dialog">
     <div class="pad-bottom-md" fxLayout="row" fxLayoutAlign="space-between center">
-        <span class="mat-card-title">New Bucket</span>
-        <button md-icon-button (click)="cancel()">
-            <md-icon color="primary">close</md-icon>
+        <span class="md-card-title">New Bucket</span>
+        <button mat-icon-button (click)="cancel()">
+            <mat-icon color="primary">close</mat-icon>
         </button>
     </div>
     <div fxLayout="column" fxLayoutAlign="space-between start" class="pad-bottom-md">
         <div class="pad-bottom-md fill-available-width">
-            <md-input-container floatPlaceholder="always" fxFlex>
-                <input #newBucketInput mdInput floatPlaceholder="always" placeholder="Bucket Name">
-            </md-input-container>
+            <mat-input-container floatPlaceholder="always" fxFlex>
+                <input #newBucketInput matInput floatPlaceholder="always" placeholder="Bucket Name">
+            </mat-input-container>
         </div>
-        <md-checkbox [(ngModel)]="keepDialogOpen">
+        <mat-checkbox [(ngModel)]="keepDialogOpen">
             Keep this dialog open after creating bucket
-        </md-checkbox>
+        </mat-checkbox>
     </div>
     <div fxLayout="row">
         <span fxFlex></span>
-        <button (click)="cancel()" color="fds-regular" md-raised-button
+        <button (click)="cancel()" color="fds-regular" mat-raised-button
                 i18n="Cancel creation of new bucket|A button for cancelling the creation of a new bucket in the registry.@@nf-admin-workflow-create-bucket-button">
             Cancel
         </button>
-        <button [disabled]="newBucketInput.value.length === 0" class="push-left-sm" (click)="createBucket(newBucketInput)" color="fds-primary" md-raised-button
+        <button [disabled]="newBucketInput.value.length === 0" class="push-left-sm" (click)="createBucket(newBucketInput)" color="fds-primary" mat-raised-button
                 i18n="Create new bucket button|A button for creating a new bucket in the registry.@@nf-admin-workflow-create-bucket-button">
             Create
         </button>

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/f07fd2f5/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.js b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.js
index 236fd72..a77e80d 100644
--- a/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.js
+++ b/nifi-registry-web-ui/src/main/webapp/components/administration/workflow/dialogs/nf-registry-create-bucket.js
@@ -64,6 +64,9 @@ NfRegistryCreateBucket.annotations = [
     })
 ];
 
-NfRegistryCreateBucket.parameters = [NfRegistryService, ngMaterial.MdDialogRef];
+NfRegistryCreateBucket.parameters = [
+    NfRegistryService,
+    ngMaterial.MatDialogRef
+];
 
 module.exports = NfRegistryCreateBucket;