nifi-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mcgil...@apache.org
Subject [7/8] nifi-registry git commit: [NIFIREG-13] Initial implementation of the registry UI/UX. This closes #8
Date Wed, 06 Sep 2017 17:45:27 GMT
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/frontend/protractor.config.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/frontend/protractor.config.js b/nifi-registry-web-ui/src/main/frontend/protractor.config.js
new file mode 100644
index 0000000..e8ef721
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/frontend/protractor.config.js
@@ -0,0 +1,201 @@
+/*
+ * 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 fs = require('fs');
+var path = require('canonical-path');
+var _ = require('lodash');
+
+exports.config = {
+    directConnect: true,
+
+    // Capabilities to be passed to the webdriver instance.
+    capabilities: {
+        'browserName': 'chrome'
+    },
+
+    // Framework to use. Jasmine is recommended.
+    framework: 'jasmine',
+
+    // Spec patterns are relative to this config file
+    specs: ['**/*e2e-spec.js'],
+
+    // For angular tests
+    useAllAngular2AppRoots: true,
+
+    // Base URL for application server
+    baseUrl: 'http://localhost:8080/nifi-registry',
+
+    // See https://github.com/angular/protractor/blob/master/docs/server-setup.md for the various protractor
+    // browser driver setup. Here we directly use Chrome or Firefox drivers. If Chrome or Firefox are not
+    // available an error will be thrown and a Selenium Server needs to be installed and started.
+    directConnect: true,
+
+    //OR
+
+    // The address of a running selenium server.
+    // seleniumAddress: 'http://localhost:4444/wd/hub',
+
+    // OR
+
+    // The location of the selenium standalone server .jar file, relative
+    // to the location of this config. If no other method of starting selenium
+    // is found, this will default to
+    // node_modules/protractor/selenium/selenium-server...
+    // seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.41.0.jar',
+
+    // The port to start the selenium server on, or null if the server should
+    // find its own unused port.
+    // seleniumPort: 4444,
+
+    onPrepare: function () {
+        // debugging
+        console.log('browser.params:' + JSON.stringify(browser.params));
+        jasmine.getEnv().addReporter(new Reporter(browser.params));
+
+        // Allow changing bootstrap mode to NG1 for upgrade tests
+        global.setProtractorToNg1Mode = function () {
+            browser.useAllAngular2AppRoots = false;
+            browser.rootEl = 'body';
+        };
+    },
+
+    jasmineNodeOpts: {
+        defaultTimeoutInterval: 10000,
+        showTiming: true,
+        print: function () {
+        }
+    }
+};
+
+// Custom reporter
+function Reporter(options) {
+    var _defaultOutputFile = path.resolve(process.cwd(), './_test-output', 'protractor-results.txt');
+    options.outputFile = options.outputFile || _defaultOutputFile;
+
+    initOutputFile(options.outputFile);
+    options.appDir = options.appDir || './';
+    var _root = {appDir: options.appDir, suites: []};
+    log('AppDir: ' + options.appDir, +1);
+    var _currentSuite;
+
+    this.suiteStarted = function (suite) {
+        _currentSuite = {description: suite.description, status: null, specs: []};
+        _root.suites.push(_currentSuite);
+        log('Suite: ' + suite.description, +1);
+    };
+
+    this.suiteDone = function (suite) {
+        var statuses = _currentSuite.specs.map(function (spec) {
+            return spec.status;
+        });
+        statuses = _.uniq(statuses);
+        var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', ');
+        _currentSuite.status = status;
+        log('Suite ' + _currentSuite.status + ': ' + suite.description, -1);
+    };
+
+    this.specStarted = function (spec) {
+
+    };
+
+    this.specDone = function (spec) {
+        var currentSpec = {
+            description: spec.description,
+            status: spec.status
+        };
+        if (spec.failedExpectations.length > 0) {
+            currentSpec.failedExpectations = spec.failedExpectations;
+        }
+
+        _currentSuite.specs.push(currentSpec);
+        log(spec.status + ' - ' + spec.description);
+    };
+
+    this.jasmineDone = function () {
+        outputFile = options.outputFile;
+        //// Alternate approach - just stringify the _root - not as pretty
+        //// but might be more useful for automation.
+        // var output = JSON.stringify(_root, null, 2);
+        var output = formatOutput(_root);
+        fs.appendFileSync(outputFile, output);
+    };
+
+    function ensureDirectoryExistence(filePath) {
+        var dirname = path.dirname(filePath);
+        if (directoryExists(dirname)) {
+            return true;
+        }
+        ensureDirectoryExistence(dirname);
+        fs.mkdirSync(dirname);
+    }
+
+    function directoryExists(path) {
+        try {
+            return fs.statSync(path).isDirectory();
+        }
+        catch (err) {
+            return false;
+        }
+    }
+
+    function initOutputFile(outputFile) {
+        ensureDirectoryExistence(outputFile);
+        var header = "Protractor results for: " + (new Date()).toLocaleString() + "\n\n";
+        fs.writeFileSync(outputFile, header);
+    }
+
+    // for output file output
+    function formatOutput(output) {
+        var indent = '  ';
+        var pad = '  ';
+        var results = [];
+        results.push('AppDir:' + output.appDir);
+        output.suites.forEach(function (suite) {
+            results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status);
+            pad += indent;
+            suite.specs.forEach(function (spec) {
+                results.push(pad + spec.status + ' - ' + spec.description);
+                if (spec.failedExpectations) {
+                    pad += indent;
+                    spec.failedExpectations.forEach(function (fe) {
+                        results.push(pad + 'message: ' + fe.message);
+                    });
+                    pad = pad.substr(2);
+                }
+            });
+            pad = pad.substr(2);
+            results.push('');
+        });
+        results.push('');
+        return results.join('\n');
+    }
+
+    // for console output
+    var _pad;
+
+    function log(str, indent) {
+        _pad = _pad || '';
+        if (indent == -1) {
+            _pad = _pad.substr(2);
+        }
+        console.log(_pad + str);
+        if (indent == 1) {
+            _pad = _pad + '  ';
+        }
+    }
+
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/locale/messages.es.xlf
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/locale/messages.es.xlf b/nifi-registry-web-ui/src/main/locale/messages.es.xlf
new file mode 100644
index 0000000..91c9e1d
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/locale/messages.es.xlf
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!--
+  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.
+-->
+
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+  <file source-language="es" datatype="plaintext" original="ng2.template">
+    <body>
+      <trans-unit id="nf-admin-general-tab-title" datatype="html">
+         <source>general</source>
+         <target state="new">general</target>
+        <note priority="1" from="description">A description of the type of administration options available.</note>
+        <note priority="1" from="meaning">General administration tab</note>
+       </trans-unit>
+      <trans-unit id="nf-admin-users-tab-title" datatype="html">
+         <source>users</source>
+         <target state="new">Usuarios</target>
+        <note priority="1" from="description">A description of the type of administration options available.</note>
+        <note priority="1" from="meaning">Users administration tab</note>
+       </trans-unit>
+      <trans-unit id="nf-admin-workflow-tab-title" datatype="html">
+         <source>Workflow</source>
+         <target state="new">Flujo de trabajo</target>
+        <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-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="meaning">Create new bucket button</note>
+       </trans-unit>
+    </body>
+  </file>
+</xliff>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/README.md
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/README.md b/nifi-registry-web-ui/src/main/platform/core/README.md
new file mode 100644
index 0000000..2981e88
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/README.md
@@ -0,0 +1,33 @@
+# Fluid Design System (FDS)
+
+FDS NiFi Registry UI/UX Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material or Teradata Covalent.
+
+The FDS will have custom components that enforce standards and best practices through built-in design patterns.
+
+## Setup
+
+Import the **[FluidDesignSystemModule]** in your NgModule:
+
+```javascript
+var fdsCore = require('@fluid-design-system/core');
+NfRegistryAppModule.prototype = {
+    constructor: NfRegistryAppModule
+};
+
+NfRegistryAppModule.annotations = [
+    new ngCore.NgModule({
+        imports: [
+            fdsCore,
+    ...
+  ],
+  ...
+})
+...
+```
+
+
+## Styles, Icons and Theming
+
+See [theming](https://github.com/apache/nifi-registry.github.io) in the docs for more info (TBD).
+
+FDS NiFi Registry UI/UX Platform comes with a base CSS file `@fluid-design-system/core/common/styles/css/fluid-design-system.css` (includes icons).

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss
new file mode 100644
index 0000000..fc5808c
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_basicElements.scss
@@ -0,0 +1,130 @@
+/*
+* 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.
+*/
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local("Roboto Light"), local("Roboto-Light"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Light.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local("Roboto LightItalic"), local("Roboto-LightItalic"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-LightItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: normal;
+  src: local("Roboto Regular"), local("Roboto-Regular"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local("Roboto Medium"), local("Roboto-Medium"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Medium.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: bold;
+  src: local("Roboto Bold"), local("Roboto-Bold"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-Bold.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: normal;
+  src: local("Roboto Italic"), local("Roboto-Italic"), url("../../../../../../../roboto-fontface/fonts/Roboto/Roboto-RegularItalic.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto Slab';
+  font-style: normal;
+  font-weight: normal;
+  src: local("RobotoSlab Regular"), local("RobotoSlab-Regular"), url("../../../../../../../roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Regular.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto Slab';
+  font-style: normal;
+  font-weight: bold;
+  src: local("RobotoSlab Bold"), local("RobotoSlab-Bold"), url("../../../../../../../roboto-fontface/fonts/Roboto-Slab/Roboto-Slab-Bold.ttf") format("truetype");
+}
+
+body,
+html {
+  height: 100%;
+}
+
+body,
+button,
+input,
+label,
+select,
+td,
+textarea {
+  font-family: $fontPrimary;
+  font-size: 14px;
+}
+
+body {
+  color: $bodyTextColor;
+}
+
+strong {
+  font-weight: bold;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+em {
+  font-style: italic;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $fontPrimary;
+  font-weight: normal;
+  font-style: normal;
+  background: #FFFFFF;
+}
+
+h1 {
+  color: $pageHeaderTextColor;
+}
+
+h2 {
+  color: $subHeaderTextColor;
+}
+
+table {
+  font-family: $fontPrimary;
+  font-size: 13px;
+  color: $grey2;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss
new file mode 100644
index 0000000..73f4263
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttonToggles.scss
@@ -0,0 +1,98 @@
+/*
+ * 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] .expansion-panel-filter-toggle-group {
+  box-shadow: none !important;
+}
+
+body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle {
+  height: 75px;
+  width: 125px;
+  border: 1px solid $grey4;
+}
+
+body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-label-content {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  line-height: 63px;
+  text-align: center;
+}
+
+body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked {
+  background-color: $blue-grey1;
+  color: white;
+}
+
+body[fds] .expansion-panel-filter-toggle-group .mat-button-toggle-checked .md-display-1 {
+  color: white;
+}
+
+body[fds] .expansion-panel-filter-toggle-group .md-display-1 {
+  color: $blue-grey1;
+}
+
+body[fds] .expansion-panel-filter-toggle-group div {
+  line-height: normal;
+}
+
+body[fds] .tab-toggle-group {
+  box-shadow: none !important;
+}
+
+body[fds] .tab-toggle-group .mat-button-toggle-label-content {
+  border-bottom: 2px solid $grey5;
+}
+
+body[fds] .tab-toggle-group .mat-button-toggle-checked {
+  background: transparent;
+}
+
+body[fds] .tab-toggle-group .mat-button-toggle-checked .mat-button-toggle-label-content {
+  border-bottom: 2px solid $blue-grey1;
+  background: transparent;
+}
+
+body[fds] .on-off-toggle-group {
+  box-shadow: none !important;
+}
+
+body[fds] .on-off-toggle-group .mat-button-toggle {
+  height: 20px;
+  width: 35px;
+  border: 1px solid $grey4;
+}
+
+body[fds] .on-off-toggle-group .mat-button-toggle-label-content {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  line-height: 20px;
+  text-align: center;
+}
+
+body[fds] .on-off-toggle-group .mat-button-toggle-checked {
+  background-color: $blue-grey1;
+  color: white;
+  border: 1px solid $blue-grey1;
+}
+
+body[fds] .off-toggle.mat-button-toggle-checked {
+  background-color: $grey4;
+  color: $grey1;
+  border: 1px solid $grey4;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
new file mode 100644
index 0000000..c8d4802
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_buttons.scss
@@ -0,0 +1,198 @@
+/*
+* 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.
+*/
+
+/* Buttons */
+
+$buttonFontColor: #FFFFFF;
+$buttonFontColorDisabled: #D1E8D1;
+$buttonBgColorPrimary: $primaryColor;
+$buttonBgColorPrimaryHover: $primaryColorHover;
+$buttonBgColorPrimaryDisabled: $primaryColor;
+$buttonBgColorPrimarySelected: $primaryColor;
+$buttonBgColorSecondary: #FFFFFF;
+$buttonBgColorSecondaryHover: $primaryColorHover;
+$buttonBgColorSecondarySelected: #FFFFFF;
+$buttonBgColorRegular: #FFFFFF;
+$buttonBgColorRegularHover: #808793;
+$buttonBgColorRegularDisabled: #808793;
+$buttonBgColorRegularSelected: #FFFFFF;
+$buttonBorderColorSecondary: $primaryColor;
+$buttonBorderColorSecondaryHover: $buttonBgColorSecondaryHover;
+$buttonBorderColorSecondaryDisabled: $buttonBgColorSecondaryHover;
+$buttonBorderColorSecondarySelected: $primaryColor;
+$buttonBorderColorRegular: #CFD3D7;
+$buttonBorderColorRegularHover: $buttonBgColorRegularHover;
+$buttonBorderColorRegularDisabled: $buttonBgColorRegularHover;
+$buttonBorderColorRegularSelected: #CFD3D7;
+$buttonFontPrimaryColor: $buttonFontColor;
+$buttonFontPrimaryColorHover: $buttonFontColor;
+$buttonFontPrimaryColorDisabled: $buttonFontColorDisabled;
+$buttonFontPrimaryColorSelected: $buttonFontColor;
+$buttonFontSecondaryColor: $primaryColorHover;
+$buttonFontSecondaryColorHover: $buttonFontColor;
+$buttonFontSecondaryColorDisabled: $buttonFontColorDisabled;
+$buttonFontSecondaryColorSelected: $primaryColorHover;
+$buttonFontRegularColor: $descriptionTextColor;
+$buttonFontRegularColorHover: $buttonFontColor;
+$buttonFontRegularColorDisabled: $buttonFontColorDisabled;
+$buttonFontRegularColorSelected: $bodyTextColor;
+$buttonFontWarnColor: $buttonFontColor;
+$buttonFontWarnColorHover: $buttonFontColor;
+$buttonFontWarnColorDisabled: $buttonFontColorDisabled;
+$buttonFontWarnColorSelected: $buttonFontColor;
+$buttonFontCriticalColor: $buttonFontColor;
+$buttonFontCriticalColorHover: $buttonFontColor;
+$buttonFontCriticalColorDisabled: $buttonFontColorDisabled;
+$buttonFontCriticalColorSelected: $buttonFontColor;
+
+body[fds] .mat-raised-button {
+  height: 34px;
+  font-family: $fontPrimary;
+  font-weight: normal;
+  font-size: 14px;
+  text-transform: uppercase;
+  line-height: normal;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
+body[fds] .mat-raised-button.cdk-focused:focus {
+  box-shadow: 0px 0px 2px 0px rgba(19, 145, 193, 1);
+}
+
+body[fds] .mat-raised-button[disabled] {
+  opacity: .6;
+}
+
+body[fds] .mat-button-focus-overlay {
+  background-color: transparent;
+}
+
+body[fds] .mat-raised-button.mat-fds-primary {
+  border: 1px solid $buttonBgColorPrimary;
+  background-color: $buttonBgColorPrimary;
+  color: $buttonFontPrimaryColor;
+}
+
+body[fds] .mat-raised-button.mat-fds-primary:hover {
+  background-color: $buttonBgColorPrimaryHover;
+  color: $buttonFontPrimaryColorHover;
+}
+
+body[fds] .mat-raised-button.mat-fds-primary.mat-button-focus {
+  color: $buttonFontPrimaryColorSelected;
+  background-color: $buttonBgColorPrimarySelected;
+}
+
+body[fds] .mat-raised-button.mat-fds-primary[disabled] {
+  color: $buttonFontPrimaryColorDisabled;
+  background-color: $buttonBgColorPrimaryDisabled;
+  color: $buttonFontPrimaryColorDisabled;
+}
+
+body[fds] .mat-raised-button.mat-fds-secondary {
+  color: $buttonFontSecondaryColor;
+  border: 1px solid $buttonBorderColorSecondary;
+}
+
+body[fds] .mat-raised-button.mat-fds-secondary:hover:not([disabled]) {
+  color: $buttonFontSecondaryColorHover;
+  background-color: $buttonBgColorSecondaryHover;
+  border: 1px solid $buttonBorderColorSecondaryHover;
+}
+
+body[fds] .mat-raised-button.mat-fds-secondary.mat-button-focus {
+  color: $buttonFontSecondaryColorSelected;
+  background-color: $buttonBgColorSecondarySelected;
+  border: 1px solid $buttonBorderColorSecondarySelected;
+}
+
+body[fds] .mat-raised-button.mat-fds-secondary[disabled] {
+  color: $buttonFontPrimaryColorDisabled;
+  background-color: $buttonBgColorPrimaryDisabled;
+}
+
+body[fds] .mat-raised-button.mat-fds-regular {
+  color: $buttonFontRegularColor;
+  background-color: $buttonBgColorRegular;
+  border: 1px solid $buttonBorderColorRegular;
+}
+
+body[fds] .mat-raised-button.mat-fds-regular:hover {
+  color: $buttonFontRegularColorHover;
+  background-color: $buttonBgColorRegularHover;
+  border: 1px solid $buttonBorderColorRegularHover;
+}
+
+body[fds] .mat-raised-button.mat-fds-regular.mat-button-focus {
+  color: $buttonFontRegularColorSelected;
+  background-color: $buttonBgColorRegularSelected;
+  border: 1px solid $buttonBorderColorRegularSelected;
+}
+
+body[fds] .mat-raised-button.mat-fds-regular[disabled] {
+  color: $buttonFontRegularColorDisabled;
+  background-color: $buttonBgColorRegularDisabled;
+  border: 1px solid $buttonBorderColorRegularDisabled;
+}
+
+body[fds] .mat-raised-button.mat-fds-warn {
+  border: 1px solid $errorColor;
+  background-color: $errorColor;
+  color: $buttonFontWarnColor;
+}
+
+body[fds] .mat-raised-button.mat-fds-warn:hover {
+  color: $buttonFontWarnColorHover;
+  background-color: $red2;
+  border: 1px solid $errorColor;
+}
+
+body[fds] .mat-raised-button.mat-fds-warn.mat-button-focus {
+  color: $buttonFontWarnColorSelected;
+  background-color: $errorColor;
+  border: 1px solid $buttonBorderColorRegularSelected;
+}
+
+body[fds] .mat-raised-button.mat-fds-warn[disabled] {
+  color: $buttonFontWarnColorDisabled;
+  background-color: $errorColor;
+  border: 1px solid $errorColor;
+}
+
+body[fds] .mat-raised-button.mat-fds-critical {
+  color: $buttonFontCriticalColor;
+  background-color: $orange1;
+  border: 1px solid $orange1;
+}
+
+body[fds] .mat-raised-button.mat-fds-critical:hover {
+  color: $buttonFontCriticalColorHover;
+  background-color: $orange2;
+  border: 1px solid $orange2;
+}
+
+body[fds] .mat-raised-button.mat-fds-critical.mat-button-focus {
+  color: $buttonFontCriticalColorSelected;
+  background-color: $orange2;
+  border: 1px solid $buttonBorderColorRegularSelected;
+}
+
+body[fds] .mat-raised-button.mat-fds-critical[disabled] {
+  color: $buttonFontCriticalColorDisabled;
+  background-color: $orange1;
+  border: 1px solid $orange1;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..319995e
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_checkboxes.scss
@@ -0,0 +1,85 @@
+/*
+* 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.
+*/
+
+/* Checkboxes */
+
+body[fds] md-checkbox {
+  margin-bottom: 3px;
+}
+
+body[fds] .mat-checkbox-inner-container {
+  height: 10px !important;
+  width: 10px !important;
+}
+
+body[fds] .mat-checkbox-frame {
+  height: 10px;
+  width: 10px;
+  border-color: $grey7;
+}
+
+body[fds] .mat-checkbox-ripple {
+  left: -7px;
+  top: -7px;
+  right: -7px;
+  bottom: -7px;
+}
+
+body[fds] .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
+body[fds] .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: $blue-grey1;
+}
+
+body[fds] .mat-checkbox-inner-container:hover {
+  background-color: $blue-grey1;
+  border-radius: 2px;
+}
+
+body[fds] .mat-checkbox-background {
+  height: 10px;
+  width: 10px;
+}
+
+/* Covalent TdDataTableComponent 'selectable' property checkboxes */
+
+body[fds] .mat-pseudo-checkbox {
+  height: 10px !important;
+  width: 10px !important;
+  border: 1px solid $grey7;
+}
+
+body[fds] .mat-pseudo-checkbox:hover {
+  background-color: $blue-grey1;
+  border: 1px solid $blue-grey1;
+}
+
+body[fds] .mat-pseudo-checkbox-checked::after {
+  content: '\f00c';
+  font-size: 8px;
+  font-family: fontawesome;
+  margin-top: -9px;
+  margin-left: -1px;
+  border: none;
+  transform: initial;
+}
+
+body[fds] .mat-pseudo-checkbox-checked, body[fds] .mat-pseudo-checkbox-indeterminate {
+  background-color: $blue-grey1;
+  border: 1px solid $blue-grey1;
+  height: 10px;
+  width: 10px;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..755f678
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_chips.scss
@@ -0,0 +1,67 @@
+/*
+* 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.
+*/
+
+/* Chips */
+
+body[fds] .mat-chip {
+  border-radius: 2px;
+  font-size: 10px;
+  font-family: $fontPrimary;
+  font-style: normal;
+  font-weight: normal;
+  padding: 4px 12px 4px 12px;
+}
+
+body[fds] .mat-chip i {
+  margin-left: 10px;
+  float: right;
+  margin-top: 2px;
+}
+
+body[fds] .mat-basic-chip {
+  color: $grey2;
+  height: 24px;
+  margin: 12px 8px 0 0;
+}
+
+body[fds] .mat-basic-chip i {
+  margin-left: 10px;
+  float: right;
+  margin-top: 2px;
+}
+
+body[fds] .mat-basic-chip .td-chip {
+  font-size: 10px;
+  padding: 0px 0px 7px 12px;
+  min-height: 24px;
+}
+
+body[fds] .td-chip span {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 65px;
+}
+
+body[fds] .td-chip-disabled .td-chip {
+  padding: 0px 0px 0px 12px;
+}
+
+body[fds] .mat-basic-chip md-icon.td-chip-removal {
+  font-size: 15px;
+  margin-bottom: 7px;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..937bce7
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_expansionPanels.scss
@@ -0,0 +1,59 @@
+/*
+* 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.
+*/
+
+/* Expansion Panels */
+
+body[fds] td-expansion-panel:not(:last-of-type) .td-expanded {
+  margin-bottom: 0px;
+}
+
+body[fds] .td-expansion-panel-header-content {
+  height: 80px !important;
+  padding: 0px 30px !important;
+  border-bottom: 1px solid $grey7;
+}
+
+body[fds] .td-expansion-content form {
+  padding: 15px 10px 20px 20px;
+}
+
+body[fds] .md-subhead {
+  font-size: 18px;
+  color: $grey3;
+}
+
+body[fds] td-expansion-panel .td-expansion-panel-header .td-expansion-panel-header-content md-icon.td-expand-icon {
+  font-size: 28px;
+  color: $blue-grey1;
+  font-weight: bold;
+}
+
+body[fds] td-expansion-panel {
+  box-shadow: none;
+}
+
+body[fds] td-expansion-panel .td-expansion-panel-header:hover:not(.mat-disabled) {
+  background: $blue4;
+}
+
+body[fds] td-expansion-panel .td-expansion-panel-header:focus {
+  background: #FFFFFF;
+}
+
+body[fds] td-expansion-panel .td-expansion-panel-header:focus .td-expansion-panel-header-content {
+  border-bottom: 1px solid $primaryColor;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..acd7efb
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_globalVars.scss
@@ -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.
+ */
+
+/* Begin Global Variables */
+
+/* Text */
+
+$fontPrimary: "Roboto",
+sans-serif;
+$fontSecondary: "Robot Slab",
+sans-serif;
+$fontMedium: "Roboto Medium",
+sans-serif;
+$fontLight: "Roboto Light",
+sans-serif;
+
+/* Define colors */
+
+$grey1: #333333;
+$grey2: #666666;
+$grey3: #999999;
+$grey4: #CCCCCC;
+$grey5: #EEEEEE;
+$grey6: #F5F5F5; // or #FAFAFA
+$grey7: #DDDDDD;
+$grey8: #CFD3D7;
+$grey9: #b2b8c1;
+$grey10: #dbdee2;
+$blue1: #1491C1;
+$blue2: #E7f6Fc;
+$blue3: #A7DFF2;
+$blue4: #F3FAFF;
+$blue5: #728E9B;
+$blue6: #004849;
+$blue7: #d0dbe0;
+$blue8: #1291c1;
+$red1: #EF6162;
+$red2: #D14A50;
+$orange1: #E98A40;
+$orange2: #D3702D;
+$green1: #1EB475;
+$green2: #3FAE2A;
+$green3: #429929;
+$rose1: #9E737D;
+$rose2: #915D69;
+$blue-grey1: #6B8791;
+$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
+$warnColor: $red1;
+$errorColor: $warnColor;
+$warningColor: $accentColor;
+$bodyTextColor: $grey1;
+$pageHeaderTextColor: $grey1;
+$subHeaderTextColor: $grey2;
+$descriptionTextColor: $grey2;
+$linkColor: $blue-grey1;
+$linkColorDisabled: $grey1;
+
+/*End Global Variables */

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss
new file mode 100644
index 0000000..6ae237c
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_helperClasses.scss
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+
+/* Text */
+
+.camel-case {
+  text-transform: capitalize;
+}
+
+.header {
+  font-family: $fontMedium;
+  font-size: 16px;
+  color: $pageHeaderTextColor;
+  padding-bottom: 10px;
+}
+
+.details-header {
+  height: 92px;
+}
+
+.details-header-container {
+  position: relative;
+  top: 22px;
+  left: 10px;
+}
+
+.description {
+  font-family: $fontLight;
+  font-size: 12px;
+  color: $descriptionTextColor;
+}
+
+.description i {
+  padding-right: 5px;
+}
+
+.label {
+  font-family: $fontMedium;
+  font-size: 14px;
+  color: $bodyTextColor;
+  text-transform: uppercase;
+}
+
+.units {
+  font-family: $fontLight;
+  font-size: 14px;
+  color: $bodyTextColor;
+}
+
+.align-vertical {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.align-horizontal {
+  margin-left: auto;
+  margin-right: auto;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..7024363
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_inputs.scss
@@ -0,0 +1,124 @@
+/*
+* 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.
+*/
+
+/* Inputs */
+
+body[fds] .mat-input-container {
+  min-width: 200px;
+}
+
+body[fds] .mat-input-wrapper {
+  margin: 0;
+  padding-bottom: 0;
+}
+
+body[fds] input.mat-input-element, body[fds] textarea.mat-input-element {
+  border-radius: 2px;
+  color: $grey2;
+  border: 1px solid $grey8;
+  height: 32px;
+  padding: 0px 10px;
+  width: calc(100% - 22px);
+}
+
+body[fds] textarea.mat-input-element {
+  padding: 10px 10px;
+}
+
+body[fds] input.mat-input-element[disabled], body[fds] textarea.mat-input-element[disabled] {
+  background: $grey9;
+  color: $grey10;
+  border: 1px solid $grey9;
+}
+
+body[fds] .mat-input-subscript-wrapper {
+  margin-top: 18px;
+  width: calc(100% - 23px);
+}
+
+body[fds] input.mat-input-element:focus, body[fds] textarea.mat-input-element:focus {
+  border-color: $blue-grey1;
+}
+
+body[fds] .mat-input-underline {
+  display: none;
+}
+
+body[fds] .mat-input-placeholder {
+  font-size: 14px;
+  color: $grey3;
+  font-weight: 300;
+}
+
+body[fds] .mat-input-placeholder-wrapper {
+  top: -20px;
+  padding-top: 33px;
+}
+
+body[fds] .mat-input-placeholder {
+  top: 20px;
+  left: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: calc(100% - 44px);
+}
+
+body[fds] md-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) {
+  transform: translateY(-26px) translateX(-10px) scale(.75);
+}
+
+body[fds] .input-button {
+  top: 3.5px;
+  left: -24px;
+  z-index: 1;
+}
+
+body[fds] .input-button.mat-raised-button[disabled] {
+  opacity: 1;
+}
+
+body[fds] .mat-input-infix {
+  padding: 7px 23px 0px 0px;
+  border-top: 0;
+}
+
+body[fds] td-chips .mat-input-placeholder-wrapper::after {
+  content: '\f0b0';
+  display: inline-table;
+  font-family: FontAwesome;
+  float: right;
+  margin: 2px 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 10px;
+  width: 100%;
+}
+
+body[fds] .mat-hint {
+  color: $grey3;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss
new file mode 100644
index 0000000..c6973c3
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_links.scss
@@ -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.
+*/
+
+/* Links */
+
+body[fds] .link {
+  color: $linkColor;
+  font-size: 14px;
+  text-decoration: none;
+}
+
+body[fds] .link:hover {
+  text-decoration: underline;
+}
+
+body[fds] .link .disabled {
+  color: $linkColorDisabled;
+  text-decoration: none;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
new file mode 100644
index 0000000..26a2333
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_menus.scss
@@ -0,0 +1,120 @@
+/*
+* 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.
+*/
+
+/* Menus */
+
+body[fds] .mat-menu-panel {
+  border-radius: 2px;
+}
+
+body[fds] .mat-menu-content {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+body[fds] .mat-menu-item {
+  font-size: 14px;
+  color: $bodyTextColor;
+  min-width: 200px;
+  text-transform: none;
+  height: 24px;
+  line-height: 24px;
+}
+
+body[fds] .regular-button-menu .mat-menu-item:hover {
+  color: #ffffff;
+  background-color: #808793;
+}
+
+body[fds] .mat-menu-item[disabled] {
+  color: rgba(0, 0, 0, 0.38);
+  background-color: #ffffff;
+}
+
+body[fds] .mat-menu-item .mat-icon {
+  font-size: 14px;
+}
+
+body[fds] .mat-menu-item .fa {
+  font-size: 14px;
+  width: 1em;
+  height: 1em;
+}
+
+body[fds] .mat-menu-item[disabled] .mat-icon {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+body[fds] .mat-menu-item[disabled] .fa {
+  color: rgba(0, 0, 0, 0.38);
+}
+
+body[fds] .mat-menu-item:hover:not([disabled]) .mat-icon {
+  color: #ffffff;
+}
+
+body[fds] .mat-menu-item:hover:not([disabled]) .fa {
+  color: #ffffff;
+}
+
+body[fds] .mat-menu-item:hover:not([disabled]),
+body[fds] .mat-menu-item:focus:not([disabled]) {
+  color: #ffffff;
+  background-color: #808793;
+}
+
+body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:hover:not([disabled]),
+body[fds] .fds-primary-dropdown-button-menu .mat-menu-item:focus:not([disabled]) {
+  color: #FFFFFF;
+  background-color: $primaryColorHover;
+}
+
+.fds-primary-dropdown-button-menu .cdk-focused {
+  color: $buttonFontPrimaryColorSelected;
+  background-color: $buttonBgColorPrimarySelected;
+}
+
+.mat-raised-button .mat-button-wrapper i {
+  padding-left: 10px;
+}
+
+body[fds] .mat-option {
+  font-size: 14px;
+  color: $bodyTextColor;
+  text-transform: none;
+  height: 24px;
+  line-height: 24px;
+}
+
+body[fds] .mat-autocomplete-panel.mat-autocomplete-panel-below {
+  top: 0;
+}
+
+body[fds] .regular-button-menu .mat-option:hover {
+  color: #ffffff;
+  background-color: #808793;
+}
+
+body[fds] .mat-option:hover:not([disabled]),
+body[fds] .mat-option:focus:not([disabled]) {
+  color: #ffffff;
+  background-color: #808793;
+}
+
+body[fds] .mat-select-underline {
+  display: none;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss
new file mode 100644
index 0000000..51c7bad
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_modals.scss
@@ -0,0 +1,23 @@
+/*
+* 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.
+*/
+
+/* Modals */
+
+body[fds] .mat-dialog-container {
+  padding: 20px;
+  width: 400px;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..f88a432
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_panels.scss
@@ -0,0 +1,54 @@
+/*
+* 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.
+*/
+
+/* Panels */
+
+body[fds] .mat-card-title {
+  font-size: 20px;
+  color: $grey1;
+  margin-bottom: 0px;
+}
+
+body[fds] md-card-title {
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+body[fds] .mat-card-subtitle {
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 10px;
+  margin-bottom: 0px;
+}
+
+body[fds] .mat-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 {
+  padding: 0px 20px 20px 20px;
+  margin: 0px;
+}
+
+body[fds] .fds-panel-menu-button {
+  position: absolute;
+  right: 0px;
+  top: 20px;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss
new file mode 100644
index 0000000..2d9ca8e
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_radios.scss
@@ -0,0 +1,56 @@
+/*
+* 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.
+*/
+
+/* Radios */
+
+body[fds] .mat-radio-container {
+  height: 12px;
+  width: 12px;
+}
+
+body[fds] .mat-radio-outer-circle {
+  height: 12px;
+  width: 12px;
+  background-color: #FFFFFF;
+  border: 1px solid $grey7;
+}
+
+body[fds] .mat-radio-outer-circle:hover {
+  background-color: $blue-grey1;
+  border-color: $blue-grey1;
+}
+
+body[fds] .mat-radio-checked .mat-radio-outer-circle {
+  border: 1px solid $blue-grey1;
+  background-color: $blue-grey1;
+}
+
+body[fds] .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
+  border-color: $blue-grey1;
+}
+
+body[fds] .mat-radio-inner-circle {
+  height: 10px;
+  width: 10px;
+  left: 1px;
+  top: 1px;
+  background-color: #FFFFFF;
+}
+
+body[fds] .mat-radio-checked .mat-radio-inner-circle {
+  background-color: #FFFFFF;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.scss
new file mode 100644
index 0000000..af3514d
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_sideNav.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.
+*/
+
+body[fds] .mat-sidenav-container {
+  height: 100%;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..0dcdade
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tables.scss
@@ -0,0 +1,113 @@
+/*
+ * 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.
+ */
+
+/* Tables */
+
+body[fds] .td-data-table-cell {
+  font-size: 13px;
+  color: $grey2;
+  padding: 0 28px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body[fds] .td-data-table-column {
+  color: $grey3;
+  font-weight: normal;
+}
+
+body[fds] .td-data-table-row {
+  height: 34px;
+  border-top: 1px solid #fff;
+  border-left: 1px solid #fff;
+  border-right: 1px solid #fff;
+  border-bottom: 1px solid $grey5;
+}
+
+body[fds] .td-data-table-row.selected {
+  background-color: $grey5;
+  border: 1px solid $grey5;
+}
+
+body[fds] .td-data-table-row:hover {
+  background-color: $grey6;
+  border: 1px solid $blue-grey2;
+}
+
+body[fds] .td-data-table-cell .mat-icon-button {
+  color: $linkColor;
+}
+
+body[fds] .td-data-table-cell .mat-button, body[fds] .td-data-table-cell .mat-icon-button, body[fds] .td-data-table-cell .mat-raised-button {
+  height: 24px;
+  width: 24px;
+  line-height: 0;
+}
+
+body[fds] .td-data-table-cell .mat-icon-button.badge {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
+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;
+  height: 34px;
+  line-height: 34px;
+  padding: 0 28px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+body[fds] .td-data-table-column .fa-caret-up, body[fds] .td-data-table-column .fa-caret-down {
+  color: $blue-grey1;
+  font-size: 12px;
+  margin-bottom: 2px;
+}
+
+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 {
+  color: $blue-grey1;
+}
+
+body[fds] .table-title {
+  font-size: 20px;
+  color: $grey1;
+  min-width: 250px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 50%;
+  margin-right: 10px;
+}
+
+body[fds] div .td-data-table {
+  border-bottom: 2px solid $grey7;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss
new file mode 100644
index 0000000..df5d653
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tabs.scss
@@ -0,0 +1,41 @@
+/*
+* 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.
+*/
+
+/* Tabs */
+
+body[fds] .mat-tab-label {
+  line-height: 72px;
+  text-transform: uppercase;
+  color: $grey2;
+}
+
+body[fds] .mat-tab-label:hover:not([disabled]) {
+  color: $grey1;
+}
+
+body[fds] .mat-tab-label:focus:not([disabled]) {
+  background-color: #FFFFFF;
+}
+
+body[fds] .mat-tab-label-active {
+  color: $grey1;
+}
+
+body[fds] .mat-tab-nav-bar,
+body[fds] .mat-tab-header {
+  border-bottom: 0px;
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss
new file mode 100644
index 0000000..563565f
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/_tooltips.scss
@@ -0,0 +1,24 @@
+/*
+* 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.
+*/
+
+/* Tooltips */
+
+body[fds] .mat-tooltip {
+  background: $grey2;
+  opacity: .9;
+  box-shadow: inset 0px 0px 3px 0px rgba(19, 145, 193, 1);
+}

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..0a29fe8
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/common/styles/fluid-design-system.scss
@@ -0,0 +1,55 @@
+/*
+ * 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.
+ */
+
+@import '../../../..//node_modules/@angular/material/theming';
+@import '../../../../node_modules/@covalent/core/theming/all-theme';
+@import 'globalVars';
+@import 'basicElements';
+@import 'helperClasses';
+@import 'buttons';
+@import 'buttonToggles';
+@import 'checkboxes';
+@import 'radios';
+@import 'chips';
+@import 'modals';
+@import 'tabs';
+@import 'inputs';
+@import 'panels';
+@import 'links';
+@import 'sideNav';
+@import 'tooltips';
+@import 'expansionPanels';
+@import 'menus';
+@import 'tables';
+@import '../../dialogs/fds-dialog-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;
+// Define the palettes
+$fds-base-palette: (50: #89df79, 100: $primaryColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $primaryColor, 600: $primaryColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-accent-palette: (50: #89df79, 100: $accentColorHover, 200: #65d550, 300: #53d03b, 400: #46c32f, 500: $accentColor, 600: $accentColor, 700: #89df79, 800: #29701b, 900: #215c16, A100: #9be48d, A200: #ade9a2, A400: #bfedb6, A700: #1a4711, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-warn-palette: (50: #81410f, 100: #D14A50, 200: #af5814, 300: #c66317, 400: #dd6f19, 500: $warnColor, 600: $warnColor, 700: #eea66e, 800: #f1b485, 900: #f4c29b, A100: #ec9857, A200: #89df79, A400: #89df79, A700: #f6d0b2, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: $white-87-opacity));
+$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
+$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
+$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);
+// Optionally specify a default, lighter, and darker hue.
+$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include angular-material-theme($fds-theme);
+@include covalent-theme($fds-theme);

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss b/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss
new file mode 100644
index 0000000..f8784a4
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/_fds-dialog-component.scss
@@ -0,0 +1,21 @@
+/*
+ * 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-dialog-title {
+  margin-top: 0;
+  margin-bottom: 20px;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..101cd9e
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.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.
+-->
+
+<fds-dialog>
+    <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>
+        </div>
+    </fds-dialog-title>
+    <fds-dialog-content class="md-subhead tc-grey-700">
+        {{message}}
+    </fds-dialog-content>
+    <fds-dialog-actions>
+        <button md-raised-button
+                color="{{cancelButtonColor}}"
+                #closeBtn
+                (keydown.arrowright)="acceptBtn.focus()"
+                (click)="cancel()">{{cancelButton}}
+        </button>
+        <button md-raised-button
+                color="{{acceptButtonColor}}"
+                #acceptBtn
+                (keydown.arrowleft)="closeBtn.focus()"
+                (click)="accept()"
+                class="push-left-sm">{{acceptButton}}
+        </button>
+    </fds-dialog-actions>
+</fds-dialog>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
new file mode 100644
index 0000000..4236b1a
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/confirm-dialog/confirm-dialog.component.js
@@ -0,0 +1,64 @@
+/*
+ * 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');
+
+/**
+ * FdsConfirmDialogComponent constructor.
+ *
+ * @constructor
+ */
+function FdsConfirmDialogComponent() {
+    this.title = '';
+    this.message = '';
+    this.acceptButton = 'ACCEPT';
+    this.acceptButtonColor = 'fds-primary';
+    this.cancelButton = 'CANCEL';
+    this.cancelButtonColor = 'fds-regular';
+    this.dialogRef = undefined;
+    this.viewContainerRef = undefined;
+    this.disableClose = true;
+};
+
+FdsConfirmDialogComponent.prototype = {
+    constructor: FdsConfirmDialogComponent,
+
+    /**
+     * Close the dialog and send a cancel response to any subscribers.
+     */
+    cancel: function () {
+        this.dialogRef.close(false);
+    },
+
+    /**
+     * Close the dialog and send an accept response to any subscribers.
+     */
+    accept: function () {
+        this.dialogRef.close(true);
+    }
+};
+
+FdsConfirmDialogComponent.annotations = [
+    new ngCore.Component({
+        selector: 'fds-confirm-dialog',
+        template: require('./confirm-dialog.component.html!text')
+    })
+];
+
+FdsConfirmDialogComponent.parameters = [];
+
+module.exports = FdsConfirmDialogComponent;

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..233bc64
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialog.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-dialog-wrapper">
+    <h3 class="fds-dialog-title md-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">
+        <ng-content select="fds-dialog-content"></ng-content>
+    </div>
+    <div class="fds-dialog-actions" *ngIf="dialogActions.length > 0" layout="row">
+        <span flex></span>
+        <ng-content select="fds-dialog-actions"></ng-content>
+    </div>
+</div>

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

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..3b9b610
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/fds-dialogs.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 fdsDialogComponentModule = require('@fluid-design-system/dialog-component');
+var fdsDialogServiceModule = require('@fluid-design-system/dialog-service');
+var FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component');
+
+var FDS_DIALOGS = [
+    fdsDialogComponentModule.FdsDialogComponent,
+    fdsDialogComponentModule.FdsDialogTitleDirective,
+    fdsDialogComponentModule.FdsDialogActionsDirective,
+    fdsDialogComponentModule.FdsDialogContentDirective,
+    FdsConfirmDialogComponent
+];
+
+var FDS_DIALOGS_ENTRY_COMPONENTS = [
+    FdsConfirmDialogComponent
+];
+
+/**
+ * FdsDialogsModule constructor.
+ *
+ * @constructor
+ */
+function FdsDialogsModule() {
+
+};
+
+FdsDialogsModule.prototype = {
+    constructor: FdsDialogsModule
+};
+
+FdsDialogsModule.annotations = [
+    new ngCore.NgModule({
+        imports: [
+            ngFlex.FlexLayoutModule,
+            ngForms.FormsModule,
+            ngCommon.CommonModule,
+            ngMaterial.MdDialogModule,
+            ngMaterial.MdInputModule,
+            ngMaterial.MdButtonModule,
+            ngMaterial.MdIconModule
+        ],
+        declarations: [
+            FDS_DIALOGS
+        ],
+        exports: [
+            FDS_DIALOGS
+        ],
+        providers: [
+            fdsDialogServiceModule.FdsDialogService
+        ],
+        entryComponents: [
+            FDS_DIALOGS_ENTRY_COMPONENTS
+        ]
+    })
+];
+
+module.exports = {
+    FdsDialogsModule: FdsDialogsModule,
+    IConfirmConfig: fdsDialogServiceModule.IConfirmConfig,
+    FdsDialogService: fdsDialogServiceModule.FdsDialogService,
+    FdsDialogComponent: fdsDialogComponentModule.FdsDialogComponent,
+    FdsDialogTitleDirective: fdsDialogComponentModule.FdsDialogTitleDirective,
+    FdsDialogContentDirective: fdsDialogComponentModule.FdsDialogContentDirective,
+    FdsDialogActionsDirective: fdsDialogComponentModule.FdsDialogActionsDirective,
+    FdsConfirmDialogComponent: FdsConfirmDialogComponent
+};

http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/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
new file mode 100644
index 0000000..06ecf43
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/platform/core/dialogs/services/dialog.service.js
@@ -0,0 +1,130 @@
+/*
+ * 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 FdsConfirmDialogComponent = require('@fluid-design-system/confirm-dialog-component');
+
+var IDialogConfig = new ngCore.Class({
+    extends: ngMaterial.MdDialogConfig,
+    constructor: function () {
+        this.title = '';
+        this.message = '';
+        this.dialogRef = undefined;
+        this.viewContainerRef = undefined;
+        this.disableClose = true;
+    }
+});
+
+var IConfirmConfig = new ngCore.Class({
+    extends: IDialogConfig,
+    constructor: function () {
+        this.acceptButton = 'ACCEPT';
+        this.acceptButtonColor = 'fds-primary';
+        this.cancelButton = 'CANCEL';
+        this.cancelButtonColor = 'fds-secondary';
+    }
+});
+
+function createConfig(config) {
+    var dialogConfig = new IConfirmConfig();
+    dialogConfig.viewContainerRef = config.viewContainerRef;
+    dialogConfig.disableClose = config.disableClose;
+    return dialogConfig;
+}
+
+/**
+ * FdsDialogService constructor.
+ *
+ * @param MdDialog      The angular material MdDialog.
+ * @constructor
+ */
+function FdsDialogService(MdDialog) {
+    this.dialogService = MdDialog;
+}
+
+FdsDialogService.prototype = {
+    contstructor: FdsDialogService,
+
+    /**
+     * Wrapper function over the open() method in MdDialog.
+     * Opens a modal dialog containing the given component.
+     *
+     * @param component     The angular ComponentType<T>.
+     * @param config        The angular material MdDialogConfig.
+     *
+     */
+    open: function (component, config) {
+        return this.dialogService.open(component, config);
+    },
+
+    /**
+     * Wrapper function over the closeAll() method in MdDialog.
+     * Closes all of the currently-open dialogs.
+     */
+    closeAll: function () {
+        this.dialogService.closeAll();
+    },
+
+    /**
+     * Opens a confirm dialog with the provided config.
+     * Returns an MdDialogRef<TdConfirmDialogComponent> object.
+     *
+     * @param config     IConfirmConfig {
+     *                                      message: string;
+     *                                      title?: string;
+     *                                      viewContainerRef?: ViewContainerRef;
+     *                                      acceptButton?: string;
+     *                                      acceptButtonColor?: string;
+     *                                      cancelButton?: string;
+     *                                      cancelButtonColor?: string;
+     *                                   }
+     */
+    openConfirm: function (config) {
+        var dialogConfig = createConfig(config);
+        var dialogRef = this.dialogService.open(FdsConfirmDialogComponent, dialogConfig);
+        var confirmDialogComponent = dialogRef.componentInstance;
+        confirmDialogComponent.dialogRef = dialogRef;
+        if (config.title) {
+            confirmDialogComponent.title = config.title;
+        }
+        if (config.message) {
+            confirmDialogComponent.message = config.message;
+        }
+        if (config.acceptButton) {
+            confirmDialogComponent.acceptButton = config.acceptButton;
+        }
+        if (config.acceptButtonColor) {
+            confirmDialogComponent.acceptButtonColor = config.acceptButtonColor;
+        }
+        if (config.cancelButton) {
+            confirmDialogComponent.cancelButton = config.cancelButton;
+        }
+        if (config.cancelButtonColor) {
+            confirmDialogComponent.cancelButtonColor = config.cancelButtonColor;
+        }
+        return dialogRef;
+    },
+}
+
+FdsDialogService.parameters = [ngMaterial.MdDialog];
+
+module.exports = {
+    IDialogConfig: IDialogConfig,
+    IConfirmConfig: IConfirmConfig,
+    FdsDialogService: FdsDialogService
+};
\ No newline at end of file


Mime
View raw message