You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2017/09/06 17:45:23 UTC
[3/8] nifi-registry git commit: [NIFIREG-13] Initial implementation
of the registry UI/UX. This closes #8
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.js b/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.js
new file mode 100644
index 0000000..84d6212
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/components/fluid-design-system/fds-demo.js
@@ -0,0 +1,1029 @@
+/*
+ * 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 NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
+var covalentCore = require('@covalent/core');
+var ngRouter = require('@angular/router');
+var ngMaterial = require('@angular/material');
+var nfRegistryAnimations = require('nifi-registry/nf-registry.animations.js');
+var fdsDialogsModule = require('@fluid-design-system/dialogs');
+
+var NUMBER_FORMAT = function (v) {
+ return v;
+};
+var DECIMAL_FORMAT = function (v) {
+ return v.toFixed(2);
+};
+var date = new Date();
+
+/**
+ * FdsDemo constructor.
+ *
+ * @param snackBarService The angular material snack bar service module.
+ * @param dialog The angular material dialog module.
+ * @param TdDialogService The covalent dialog service module.
+ * @param TdDataTableService The covalent data table service module.
+ * @constructor
+ */
+function FdsDemo(snackBarService, dialog, TdDataTableService, FdsDialogService) {
+
+ //<editor-fold desc="Snack Bars">
+
+ this.snackBarService = snackBarService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ this.dialog = dialog;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ this.dialogService = FdsDialogService;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ this.expandCollapseExpansion1Msg = 'No expanded/collapsed detected yet';
+ this.expansion1 = false;
+ this.disabled = false;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Autocomplete">
+
+ this.currentState = '';
+ this.reactiveStates = '';
+ this.tdStates = [];
+ this.tdDisabled = false;
+ this.states = [
+ {code: 'AL', name: 'Alabama'},
+ {code: 'AK', name: 'Alaska'},
+ {code: 'AZ', name: 'Arizona'},
+ {code: 'AR', name: 'Arkansas'},
+ {code: 'CA', name: 'California'},
+ {code: 'CO', name: 'Colorado'},
+ {code: 'CT', name: 'Connecticut'},
+ {code: 'DE', name: 'Delaware'},
+ {code: 'FL', name: 'Florida'},
+ {code: 'GA', name: 'Georgia'},
+ {code: 'HI', name: 'Hawaii'},
+ {code: 'ID', name: 'Idaho'},
+ {code: 'IL', name: 'Illinois'},
+ {code: 'IN', name: 'Indiana'},
+ {code: 'IA', name: 'Iowa'},
+ {code: 'KS', name: 'Kansas'},
+ {code: 'KY', name: 'Kentucky'},
+ {code: 'LA', name: 'Louisiana'},
+ {code: 'ME', name: 'Maine'},
+ {code: 'MD', name: 'Maryland'},
+ {code: 'MA', name: 'Massachusetts'},
+ {code: 'MI', name: 'Michigan'},
+ {code: 'MN', name: 'Minnesota'},
+ {code: 'MS', name: 'Mississippi'},
+ {code: 'MO', name: 'Missouri'},
+ {code: 'MT', name: 'Montana'},
+ {code: 'NE', name: 'Nebraska'},
+ {code: 'NV', name: 'Nevada'},
+ {code: 'NH', name: 'New Hampshire'},
+ {code: 'NJ', name: 'New Jersey'},
+ {code: 'NM', name: 'New Mexico'},
+ {code: 'NY', name: 'New York'},
+ {code: 'NC', name: 'North Carolina'},
+ {code: 'ND', name: 'North Dakota'},
+ {code: 'OH', name: 'Ohio'},
+ {code: 'OK', name: 'Oklahoma'},
+ {code: 'OR', name: 'Oregon'},
+ {code: 'PA', name: 'Pennsylvania'},
+ {code: 'RI', name: 'Rhode Island'},
+ {code: 'SC', name: 'South Carolina'},
+ {code: 'SD', name: 'South Dakota'},
+ {code: 'TN', name: 'Tennessee'},
+ {code: 'TX', name: 'Texas'},
+ {code: 'UT', name: 'Utah'},
+ {code: 'VT', name: 'Vermont'},
+ {code: 'VA', name: 'Virginia'},
+ {code: 'WA', name: 'Washington'},
+ {code: 'WV', name: 'West Virginia'},
+ {code: 'WI', name: 'Wisconsin'},
+ {code: 'WY', name: 'Wyoming'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ this.dataTableService = TdDataTableService;
+
+ this.droplets = [{
+ id: '23f6cc59-0156-1000-09b4-2b0610089090',
+ name: "Decompression_Circular_Flow",
+ displayName: 'Decompressed Circular flow',
+ type: 'flow',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ fleet: {
+ id: '23f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Fleet',
+ type: 'certification'
+ },
+ prod: {
+ id: '52fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ secure: {
+ id: '32f6cc59-3549-0001-05g6-4d4567890765',
+ label: 'Secure',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765'
+ }],
+ created: date.setDate(date.getDate() - 1),
+ updated: new Date()
+ }, {
+ id: '25fd6vv87-3549-0001-05g6-4d4567890765',
+ revision: '2',
+ dependentFlows: [{
+ id: '23f6cc59-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ }, {
+ 'name': 'Action 3',
+ 'icon': 'fa fa-question',
+ 'tooltip': 'Whatever else we want to do...'
+ }]
+ }, {
+ id: '25fd6vv87-3249-0001-05g6-4d4767890765',
+ name: "DateConversion",
+ displayName: 'Date conversion',
+ type: 'asset',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '25fd6vv34-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ type: 'certification'
+ },
+ prod: {
+ id: '52vn6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Production Ready',
+ type: 'certification'
+ },
+ versions: [{
+ id: '23f6ic59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc19-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }]
+ }, {
+ id: '52fd6vv87-3294-0001-05g6-4d4767890765',
+ name: "nifi-email-bundle",
+ displayName: 'nifi-email-bundle',
+ type: 'extension',
+ sublabel: 'A sublabel',
+ compliant: {
+ id: '33fd6vv87-3549-0001-05g6-4d4567890765',
+ label: 'Compliant',
+ test: {
+ label: 'test'
+ },
+ type: 'certification'
+ },
+ versions: [{
+ id: '23d3cc59-0156-1000-06b4-2b0810089090',
+ revision: '1',
+ dependentFlows: [{
+ id: '23f6cc89-0156-1000-06b4-2b0810089090'
+ }],
+ created: new Date(),
+ updated: new Date()
+ }],
+ flows: [],
+ extensions: [],
+ assets: [],
+ actions: [{
+ 'name': 'Delete',
+ 'icon': 'fa fa-close',
+ 'tooltip': 'Delete User'
+ }, {
+ 'name': 'Manage',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage User'
+ },]
+ }];
+
+ this.filteredDroplets = [];
+
+ this.dropletColumns = [
+ {name: 'id', label: 'ID', sortable: true},
+ {name: 'name', label: 'Name', sortable: true,},
+ {name: 'displayName', label: 'Display Name', sortable: true},
+ {name: 'sublabel', label: 'Label', sortable: true},
+ {name: 'type', label: 'Type', sortable: true}
+ ];
+
+ this.autoCompleteDroplets = [];
+ this.dropletsSearchTerms = [];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Data Tables">
+
+ this.data = [{
+ 'id': 1,
+ 'name': 'Frozen yogurt',
+ 'type': 'Ice cream',
+ 'calories': 159.0,
+ 'fat': 6.0,
+ 'carbs': 24.0,
+ 'protein': 4.0,
+ 'sodium': 87.0,
+ 'calcium': 14.0,
+ 'iron': 1.0,
+ 'comments': 'I love froyo!',
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }]
+ }, {
+ 'id': 2,
+ 'name': 'Ice cream sandwich',
+ 'type': 'Ice cream',
+ 'calories': 237.0,
+ 'fat': 9.0,
+ 'carbs': 37.0,
+ 'protein': 4.3,
+ 'sodium': 129.0,
+ 'calcium': 8.0,
+ 'iron': 1.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }]
+ }, {
+ 'id': 3,
+ 'name': 'Eclair',
+ 'type': 'Pastry',
+ 'calories': 262.0,
+ 'fat': 16.0,
+ 'carbs': 24.0,
+ 'protein': 6.0,
+ 'sodium': 337.0,
+ 'calcium': 6.0,
+ 'iron': 7.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 4,
+ 'name': 'Cupcake',
+ 'type': 'Pastry',
+ 'calories': 305.0,
+ 'fat': 3.7,
+ 'carbs': 67.0,
+ 'protein': 4.3,
+ 'sodium': 413.0,
+ 'calcium': 3.0,
+ 'iron': 8.0,
+ 'actions': [{
+ 'name': 'Action 1',
+ 'icon': 'fa fa-user',
+ 'tooltip': 'Manage Users'
+ }, {
+ 'name': 'Action 2',
+ 'icon': 'fa fa-key',
+ 'tooltip': 'Manage Permissions'
+ }, {
+ 'name': 'Action 3',
+ 'tooltip': 'Action 3'
+ }, {
+ 'name': 'Action 4',
+ 'disabled': true,
+ 'tooltip': 'Action 4'
+ }, {
+ 'name': 'Action 5',
+ 'tooltip': 'Action 5'
+ }],
+ }, {
+ 'id': 5,
+ 'name': 'Jelly bean',
+ 'type': 'Candy',
+ 'calories': 375.0,
+ 'fat': 0.0,
+ 'carbs': 94.0,
+ 'protein': 0.0,
+ 'sodium': 50.0,
+ 'calcium': 0.0,
+ 'iron': 0.0,
+ }, {
+ 'id': 6,
+ 'name': 'Lollipop',
+ 'type': 'Candy',
+ 'calories': 392.0,
+ 'fat': 0.2,
+ 'carbs': 98.0,
+ 'protein': 0.0,
+ 'sodium': 38.0,
+ 'calcium': 0.0,
+ 'iron': 2.0,
+ }, {
+ 'id': 7,
+ 'name': 'Honeycomb',
+ 'type': 'Other',
+ 'calories': 408.0,
+ 'fat': 3.2,
+ 'carbs': 87.0,
+ 'protein': 6.5,
+ 'sodium': 562.0,
+ 'calcium': 0.0,
+ 'iron': 45.0,
+ }, {
+ 'id': 8,
+ 'name': 'Donut',
+ 'type': 'Pastry',
+ 'calories': 452.0,
+ 'fat': 25.0,
+ 'carbs': 51.0,
+ 'protein': 4.9,
+ 'sodium': 326.0,
+ 'calcium': 2.0,
+ 'iron': 22.0,
+ }, {
+ 'id': 9,
+ 'name': 'KitKat',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 10,
+ 'name': 'Chocolate',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ }, {
+ 'id': 11,
+ 'name': 'Chamoy',
+ 'type': 'Candy',
+ 'calories': 518.0,
+ 'fat': 26.0,
+ 'carbs': 65.0,
+ 'protein': 7.0,
+ 'sodium': 54.0,
+ 'calcium': 12.0,
+ 'iron': 6.0,
+ },];
+
+ this.filteredData = this.data;
+ this.filteredTotal = this.data.length;
+
+ this.columns = [
+ {name: 'comments', label: 'Comments', width: 10},
+ {name: 'name', label: 'Dessert (100g serving)', sortable: true, width: 10},
+ {name: 'type', label: 'Type', sortable: true, width: 10},
+ {name: 'calories', label: 'Calories', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'fat', label: 'Fat (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true, width: 10},
+ {name: 'carbs', label: 'Carbs (g)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'protein', label: 'Protein (g)', numeric: true, format: DECIMAL_FORMAT, sortable: true, width: 10},
+ {name: 'sodium', label: 'Sodium (mg)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'calcium', label: 'Calcium (%)', numeric: true, format: NUMBER_FORMAT, sortable: true, width: 10},
+ {name: 'iron', label: 'Iron (%)', numeric: true, format: NUMBER_FORMAT, width: 10},
+ ];
+
+ this.allRowsSelected = false;
+ this.autoCompleteData = [];
+ this.selectedRows = [];
+
+ this.searchTerm = [];
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 5;
+ this.pageCount = 0;
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ this.readOnly = false;
+
+ this.items = [
+ 'stepper',
+ 'expansion-panel',
+ 'markdown',
+ 'highlight',
+ 'loading',
+ 'media',
+ 'chips',
+ 'http',
+ 'json-formatter',
+ 'pipes',
+ 'need more?',
+ ];
+
+ this.itemsRequireMatch = this.items.slice(0, 6);
+
+ //</editor-fold>
+
+ //<editor-fold desc="Radios">
+
+ this.favoriteSeason = 'Autumn';
+
+ this.seasonOptions = [
+ 'Winter',
+ 'Spring',
+ 'Summer',
+ 'Autumn',
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Select">
+
+ this.selectedValue = '';
+
+ this.foods = [
+ {value: 'steak-0', viewValue: 'Steak'},
+ {value: 'pizza-1', viewValue: 'Pizza'},
+ {value: 'tacos-2', viewValue: 'Tacos'},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips">
+
+ this.chips = [
+ {name: 'Default', color: '', selected: false},
+ {name: 'Default (selected)', color: '', selected: true},
+ {name: 'Primary (selected)', color: 'primary', selected: true},
+ {name: 'Accent (selected)', color: 'accent', selected: true},
+ {name: 'Warn (selected)', color: 'warn', selected: true},
+ ];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Checkbox">
+
+ this.user = {
+ agreesToTOS: false
+ };
+
+ this.groceries = [{
+ bought: true,
+ name: 'Seitan',
+ }, {
+ bought: false,
+ name: 'Almond Meal Flour',
+ }, {
+ bought: false,
+ name: 'Organic Eggs',
+ },];
+
+ //</editor-fold>
+
+ //<editor-fold desc="Slide Toggle">
+
+ this.systems = [{
+ name: 'Lights',
+ on: false,
+ color: 'primary',
+ }, {
+ name: 'Surround Sound',
+ on: true,
+ color: 'accent',
+ }, {
+ name: 'T.V.',
+ on: true,
+ color: 'warn',
+ },];
+
+ this.house = {
+ lockHouse: false,
+ };
+
+ //</editor-fold>
+};
+
+FdsDemo.prototype = {
+ constructor: FdsDemo,
+
+ //<editor-fold desc="Autocomplete">
+
+ displayFn: function (value) {
+ return value && typeof value === 'object' ? value.name : value;
+ },
+
+ filterStates: function (val) {
+ return val ? this.states.filter(function (s) {
+ return s.name.match(new RegExp(val, 'gi'));
+ }) : this.states;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Snack Bars">
+
+ showSnackBar: function () {
+ var snackBarRef = this.snackBarService.open('Message', 'Action', {duration: 3000});
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Dialog">
+
+ openDialog: function () {
+ this.dialog.open(NfRegistryExplorer, {
+ height: '50%', // can be px or %
+ width: '60%', // can be px or %
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Expansion Panel">
+
+ toggleExpansion1: function () {
+ if (!this.disabled) {
+ this.expansion1 = !this.expansion1;
+ }
+ },
+
+ toggleDisabled: function () {
+ this.disabled = !this.disabled;
+ },
+
+ expandExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Expand event emitted.';
+ },
+
+ collapseExpansion1Event: function () {
+ this.expandCollapseExpansion1Msg = 'Collapse event emitted.';
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Simple Dialogs">
+
+ openAlert: function () {
+ this.dialogService.openAlert({
+ title: 'Alert',
+ disableClose: true,
+ message: 'This is how simple it is to create an alert with this wrapper service.',
+ });
+ },
+
+ openConfirm: function () {
+ this.dialogService.openConfirm({
+ title: 'Confirm',
+ message: 'This is how simple it is to create a confirm with this wrapper service. Do you agree?',
+ cancelButton: 'Disagree',
+ acceptButton: 'Agree',
+ });
+ },
+
+ openPrompt: function () {
+ this.dialogService.openPrompt({
+ title: 'Prompt',
+ message: 'This is how simple it is to create a prompt with this wrapper service. Prompt something.',
+ value: 'Populated value',
+ cancelButton: 'Cancel',
+ acceptButton: 'Ok',
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Searchable Expansion Panels">
+
+ isDropletFilterChecked: function (term) {
+ return (this.dropletsSearchTerms.indexOf(term) > -1);
+ },
+
+ getDropletTypeCount: function (type) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return droplet.type === type;
+ }).length;
+ },
+
+ getDropletCertificationCount: function (certification) {
+ return this.filteredDroplets.filter(function (droplet) {
+ return Object.keys(droplet).find(function (key) {
+ if (key === certification && droplet[certification].type === 'certification') {
+ return droplet;
+ }
+ });
+ }).length;
+ },
+
+ getSortBy: function () {
+ var sortByColumnLabel;
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].active === true) {
+ sortByColumnLabel = this.dropletColumns[i].label;
+ break;
+ }
+ }
+ return sortByColumnLabel;
+ },
+
+ sortDroplets: function (sortEvent, column) {
+ if (column.sortable === true) {
+ // toggle column sort order
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filterDroplets(column.name, sortOrder);
+ this.activeColumn = column;
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ }
+ },
+
+ dropletsSearchRemove: function (searchTerm) {
+ this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder);
+ },
+
+ dropletsSearchAdd: function (searchTerm) {
+ this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder);
+ },
+
+ toggleDropletsFilter: function (searchTerm) {
+ var applySearchTerm = true;
+ // check if the search term is already applied and remove it if true
+ if (this.dropletsSearchTerms.length > 0) {
+ var arrayLength = this.dropletsSearchTerms.length;
+ for (var i = 0; i < arrayLength; i++) {
+ var index = this.dropletsSearchTerms.indexOf(searchTerm);
+ if (index > -1) {
+ this.dropletsSearchTerms.splice(index, 1);
+ applySearchTerm = false;
+ }
+ }
+ }
+
+ // if we just removed the search term do NOT apply it again
+ if (applySearchTerm) {
+ this.dropletsSearchTerms.push(searchTerm);
+ }
+
+ this.filterDroplets(this.activeColumn.name, this.activeColumn.sortOrder);
+ },
+
+ filterDroplets: function (sortBy, sortOrder) {
+ // if `sortOrder` is `undefined` then use 'ASC'
+ if (sortOrder === undefined) {
+ sortOrder = 'ASC'
+ }
+ // if `sortBy` is `undefined` then find the first sortable column in this.dropletColumns
+ if (sortBy === undefined) {
+ var arrayLength = this.dropletColumns.length;
+ for (var i = 0; i < arrayLength; i++) {
+ if (this.dropletColumns[i].sortable === true) {
+ sortBy = this.dropletColumns[i].name;
+ this.activeColumn = this.dropletColumns[i];
+ //only one column can be actively sorted so we reset all to inactive
+ this.dropletColumns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ this.dropletColumns[i].active = true;
+ this.dropletColumns[i].sortOrder = sortOrder;
+ break;
+ }
+ }
+ }
+
+ var newData = this.droplets;
+
+ for (var i = 0; i < this.dropletsSearchTerms.length; i++) {
+ newData = this.filterData(newData, this.dropletsSearchTerms[i], true, this.activeColumn.name);
+ }
+
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.filteredDroplets = newData;
+ this.getAutoCompleteDroplets();
+ },
+
+ getAutoCompleteDroplets: function () {
+ var self = this;
+ this.autoCompleteDroplets = [];
+ this.dropletColumns.forEach(function (c) {
+ self.filteredDroplets.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ? self.autoCompleteDroplets.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ filterData: function (data, searchTerm, ignoreCase) {
+ var field = '';
+ if (searchTerm.indexOf(":") > -1) {
+ field = searchTerm.split(':')[0].trim();
+ searchTerm = searchTerm.split(':')[1].trim();
+ }
+ var filter = searchTerm ? (ignoreCase ? searchTerm.toLowerCase() : searchTerm) : '';
+
+ if (filter) {
+ data = data.filter(function (item) {
+ var res = Object.keys(item).find(function (key) {
+ if (field.indexOf(".") > -1) {
+ var objArray = field.split(".");
+ var obj = item;
+ var arrayLength = objArray.length;
+ for (var i = 0; i < arrayLength; i++) {
+ try {
+ obj = obj[objArray[i]];
+ } catch (e) {
+ return false;
+ }
+ }
+ var preItemValue = ('' + obj);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ } else {
+ if (key !== field && field !== '') {
+ return false;
+ }
+ var preItemValue = ('' + item[key]);
+ var itemValue = ignoreCase ? preItemValue.toLowerCase() : preItemValue;
+ return itemValue.indexOf(filter) > -1;
+ }
+ });
+ return !(typeof res === 'undefined');
+ });
+ }
+ return data;
+ },
+
+ //<editor-fold desc="Data Tables">
+
+ sort: function (sortEvent, column) {
+ if (column.sortable) {
+ var sortBy = column.name;
+ var sortOrder = column.sortOrder = (column.sortOrder === 'ASC') ? 'DESC' : 'ASC';
+ this.filter(sortBy, sortOrder);
+
+ //only one column can be actively sorted so we reset all to inactive
+ this.columns.forEach(function (c) {
+ c.active = false;
+ });
+ //and set this column as the actively sorted column
+ column.active = true;
+ }
+ },
+
+ searchRemove: function (searchTerm) {
+ //only remove the first occurrence of the search term
+ var index = this.searchTerm.indexOf(searchTerm);
+ if (index !== -1) {
+ this.searchTerm.splice(index, 1);
+ }
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 1;
+ this.filter();
+ },
+
+ searchAdd: function (searchTerm) {
+ this.searchTerm.push(searchTerm);
+ this.fromRow = 1;
+ this.currentPage = 1;
+ this.pageSize = 1;
+ this.filter();
+ },
+
+ page: function (pagingEvent) {
+ this.fromRow = pagingEvent.fromRow;
+ this.currentPage = pagingEvent.page;
+ this.pageSize = pagingEvent.pageSize;
+ this.filter();
+ },
+
+ filter: function (sortBy, sortOrder) {
+ if (this.allRowsSelected) {
+ this.toggleSelectAll();
+ }
+ this.deselectAll();
+ var newData = this.data;
+
+ for (var i = 0; i < this.searchTerm.length; i++) {
+ newData = this.filterData(newData, this.searchTerm[i], true);
+ }
+ this.filteredTotal = newData.length;
+ newData = this.dataTableService.sortData(newData, sortBy, sortOrder);
+ this.pageCount = newData.length;
+ newData = this.dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
+ this.filteredData = newData;
+ this.getAutoCompleteData();
+ },
+
+ toggleSelect: function (row) {
+ if (this.allFilteredRowsSelected()) {
+ this.allRowsSelected = true;
+ } else {
+ this.allRowsSelected = false;
+ }
+ },
+
+ toggleSelectAll: function () {
+ if (this.allRowsSelected) {
+ this.selectAll();
+ } else {
+ this.deselectAll();
+ }
+ },
+
+ selectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = true;
+ });
+ },
+
+ deselectAll: function () {
+ this.filteredData.forEach(function (c) {
+ c.checked = false;
+ });
+ },
+
+ allFilteredRowsSelected: function () {
+ var allFilteredRowsSelected = true;
+ this.filteredData.forEach(function (c) {
+ if (c.checked === undefined || c.checked === false) {
+ allFilteredRowsSelected = false;
+ }
+ });
+
+ return allFilteredRowsSelected;
+ },
+
+ areTooltipsOn: function () {
+ return this.columns[0].hasOwnProperty('tooltip');
+ },
+
+ toggleTooltips: function () {
+ if (this.columns[0].tooltip) {
+ this.columns.forEach(function (c) {
+ delete c.tooltip;
+ });
+ } else {
+ this.columns.forEach(function (c) {
+ c.tooltip = 'This is ' + c.label + '!';
+ });
+ }
+ },
+
+ openDataTablePrompt: function (row, name) {
+ this.dialogService.openPrompt({
+ message: 'Enter comment?',
+ value: row[name],
+ }).afterClosed().subscribe(function (value) {
+ if (value !== undefined) {
+ row[name] = value;
+ }
+ })
+ },
+
+ getAutoCompleteData: function () {
+ var self = this;
+ this.autoCompleteData = [];
+ this.columns.forEach(function (c) {
+ self.filteredData.forEach(function (r) {
+ (r[c.name.toLowerCase()]) ? self.autoCompleteData.push(r[c.name.toLowerCase()].toString()) : '';
+ });
+ });
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Chips $ Autocomplete">
+
+ toggleReadOnly: function () {
+ this.readOnly = !this.readOnly;
+ },
+
+ //</editor-fold>
+
+ //<editor-fold desc="Life Cycle Listeners">
+
+ /**
+ * Initialize the component
+ */
+ ngOnInit: function () {
+ this.filter();
+ this.filterDroplets();
+ }
+
+ //</editor-fold>
+};
+
+FdsDemo.annotations = [
+ new ngCore.Component({
+ template: require('./fds-demo.html!text'),
+ animations: [nfRegistryAnimations.slideInLeftAnimation],
+ host: {
+ '[@routeAnimation]': 'routeAnimation'
+ }
+ })
+];
+
+FdsDemo.parameters = [ngMaterial.MdSnackBar, ngMaterial.MdDialog, covalentCore.TdDataTableService, fdsDialogsModule.FdsDialogService];
+
+module.exports = FdsDemo;
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js b/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
new file mode 100644
index 0000000..26c676b
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/components/page-not-found/nf-registry-page-not-found.js
@@ -0,0 +1,36 @@
+/*
+ * 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');
+
+/**
+ * NfPageNotFoundComponent constructor.
+ */
+function NfPageNotFoundComponent() {
+ this.title = "Page Not Found!!!!";
+};
+
+NfPageNotFoundComponent.prototype = {
+ constructor: NfPageNotFoundComponent
+};
+
+NfPageNotFoundComponent.annotations = [
+ new ngCore.Component({
+ template: '<h1>Hello {{title}}!</h1>'
+ })
+];
+
+module.exports = NfPageNotFoundComponent;
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/css/main.css
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/css/main.css b/nifi-registry-web-ui/src/main/webapp/css/main.css
deleted file mode 100644
index 6e9d02d..0000000
--- a/nifi-registry-web-ui/src/main/webapp/css/main.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/* general */
-
-body {
- font-family: Open Sans;
-}
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/images/registry-favicon.png
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/images/registry-favicon.png b/nifi-registry-web-ui/src/main/webapp/images/registry-favicon.png
new file mode 100644
index 0000000..87dc8c9
Binary files /dev/null and b/nifi-registry-web-ui/src/main/webapp/images/registry-favicon.png differ
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/images/registry-logo-web-app.svg
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/images/registry-logo-web-app.svg b/nifi-registry-web-ui/src/main/webapp/images/registry-logo-web-app.svg
new file mode 100644
index 0000000..25cf2ae
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/images/registry-logo-web-app.svg
@@ -0,0 +1,17 @@
+<!--
+ 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.
+-->
+<svg id="registryl-logo-mini" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 37.49 48"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#acbbbf;}.cls-3{fill:#899ea3;}.cls-4{fill:#678289;}</style><linearGradient id="linear-gradient" x1="20.82" y1="33.66" x2="20.82" y2="20.7" gradientUnits="userSpaceOnUse"><stop offset="0.3" stop-color="#678289" stop-opacity="0.9"/><stop offset="1" stop-color="#678289" stop-opacity="0"/></linearGradient></defs><title>registry-logo-web-app</title><polygon class="cls-1" points="14.34 33.66 14.34 20.7 27.3 20.7 14.34 33.66"/><polygon class="cls-2" points="0 48 0 35.05 12.95 35.05 0 48"/><rect class="cls-2" y="20.7" width="12.95" height="12.95" transform="translate(33.66 20.7) rotate(90)"/><path class="cls-2" d="M9.79,16.32a9.7,9.7,0,0,1-2.13.24,11.47,11.47,0,0,1-5.33-1.41c-.22-.11-.55-.29-.46-.63l0-.2.23-.1h.13a2.16,2.16,0,0,1,.62.14,15.94,15.94,0,0,0,2,.66,8.59,8.59,0,0,0,2,.23A8.34,8.34,0,0,0,9,15a
19.33,19.33,0,0,0,3.46-1.41l.47-.22v-7H0v13H13V15.23A19.51,19.51,0,0,1,9.79,16.32Z"/><path class="cls-3" d="M12.48,13.54a16.71,16.71,0,0,1,4.38-1.64,10.29,10.29,0,0,1,1.77-.15,11.14,11.14,0,0,1,4.42.94l1.82-.77L19.81,0,7.89,5.06l3.77,8.88Z"/><path class="cls-3" d="M13,16.95c.21-1.13,1.9-1.8,2.82-2.16a9.72,9.72,0,0,1,2.15-.62c.45-.06,1.06,0,1.13-.18s-1.55-.25-3.12.14a28.83,28.83,0,0,0-3.61,1.35A9.11,9.11,0,0,0,13,16.95Z"/><path class="cls-4" d="M27.24,16a9.89,9.89,0,0,1,1.42,3.3l8.82-8.82L28.33,1.35l-9.16,9.16L20.62,12A10.26,10.26,0,0,1,27.24,16Z"/></svg>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js b/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
new file mode 100644
index 0000000..14bdc3c
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry-bootstrap.js
@@ -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.
+ */
+
+require('core-js');
+require('zone.js');
+require('hammerjs');
+require('switchMap');
+var $ = require('jquery');
+var NfRegistryModule = require('nifi-registry/nf-registry.module.js');
+var ngPlatformBrowserDynamic = require('@angular/platform-browser-dynamic');
+var ngCore = require('@angular/core');
+
+// Comment out this line when developing to assert for unidirectional data flow
+ngCore.enableProdMode();
+
+// Get the locale id from the global
+var locale = navigator.language;
+
+var providers = [];
+
+// No locale or U.S. English: no translation providers so go ahead and bootstrap the app
+if (!locale || locale === 'en-US') {
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(NfRegistryModule, {providers: providers});
+} else { //load the translation providers and bootstrap the module
+ var translationFile = './nifi-registry/messages.' + locale + '.xlf';
+
+ $.ajax({
+ url: translationFile
+ }).done(function (translations) {
+ // add providers if translation file for locale is loaded
+ if (translations) {
+ providers.push({provide: ngCore.TRANSLATIONS, useValue: translations});
+ providers.push({provide: ngCore.TRANSLATIONS_FORMAT, useValue: 'xlf'});
+ providers.push({provide: ngCore.LOCALE_ID, useValue: locale});
+ }
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(NfRegistryModule, {providers: providers});
+ }).fail(function () {
+ ngPlatformBrowserDynamic.platformBrowserDynamic().bootstrapModule(NfRegistryModule, {providers: providers});
+ });
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.animations.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.animations.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.animations.js
new file mode 100644
index 0000000..c446012
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.animations.js
@@ -0,0 +1,119 @@
+/*
+ * 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 ngAnimate = require('@angular/animations');
+
+/**
+ * NfAnimations constructor.
+ *
+ * @constructor
+ */
+function NfAnimations() {
+};
+
+NfAnimations.prototype = {
+ constructor: NfAnimations,
+
+ /**
+ * Fade animation
+ */
+ fadeAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0
+ }),
+ ngAnimate.animate('0.3s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0
+ }))
+ ])
+ ]),
+
+ /**
+ * Slide in from the left animation
+ */
+ slideInLeftAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1,
+ transform: 'translateX(0)'
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0,
+ transform: 'translateX(-100%)'
+ }),
+ ngAnimate.animate('0.3s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0,
+ transform: 'translateX(100%)'
+ }))
+ ])
+ ]),
+
+ /**
+ * Slide in from the top animation
+ */
+ slideInDownAnimation: ngAnimate.trigger('routeAnimation', [
+ ngAnimate.state('*',
+ ngAnimate.style({
+ opacity: 1,
+ transform: 'translateY(0)'
+ })
+ ),
+ ngAnimate.transition(':enter', [
+ ngAnimate.style({
+ opacity: 0,
+ transform: 'translateY(-100%)'
+ }),
+ ngAnimate.animate('0.3s ease-in')
+ ]),
+ ngAnimate.transition(':leave', [
+ ngAnimate.animate('0.5s ease-out', ngAnimate.style({
+ opacity: 0,
+ transform: 'translateY(100%)'
+ }))
+ ])
+ ]),
+
+ /**
+ * Fly in/out animation
+ */
+ flyInOutAnimation: ngAnimate.trigger('flyInOut', [
+ ngAnimate.state('in',
+ ngAnimate.style({transform: 'translateX(0)'})
+ ),
+ ngAnimate.transition('void => *', [
+ ngAnimate.style({transform: 'translateX(100%)'}),
+ ngAnimate.animate('0.5s 0.1s ease-in')
+ ]),
+ ngAnimate.transition('* => void', ngAnimate.animate('0.3s ease-out', ngAnimate.style({transform: 'translateX(-100%)'})))
+ ])
+
+};
+
+module.exports = new NfAnimations();
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.e2e-spec.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.e2e-spec.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.e2e-spec.js
new file mode 100644
index 0000000..fdf10bd
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.e2e-spec.js
@@ -0,0 +1,30 @@
+/*
+ * 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 protractor = require('protractor');
+
+describe('NifiRegistry E2E Tests', function () {
+
+ beforeEach(function () {
+ protractor.browser.get('');
+ });
+
+ it('true is true', function () {
+ expect(true).toEqual(true);
+ });
+
+});
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.html
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.html b/nifi-registry-web-ui/src/main/webapp/nf-registry.html
new file mode 100644
index 0000000..f8798dd
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.html
@@ -0,0 +1,88 @@
+<!--
+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.
+-->
+
+<md-sidenav-container>
+ <md-sidenav #sidenav mode="over" align="end" opened="false" disableClose="true">
+ <router-outlet name="sidenav"></router-outlet>
+ </md-sidenav>
+ <div id="nf-registry-app-container">
+ <md-toolbar id="nifi-registry-toolbar">
+ <img id="nifi-registry-logo" src="nifi-registry/images/registry-logo-web-app.svg">
+ <div fxFlex="1 1 auto" class="pad-left-xl" [@flyInOut]="nfRegistryService.breadCrumbState">
+ <span routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}">{{nfRegistryService.registry.name}}</span>
+ <md-menu #availableRegistriesMenu="mdMenu" [overlapTrigger]="false">
+ <button md-menu-item *ngFor="let registry of nfRegistryService.registries"
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{registry.id}}">
+ <span>{{registry.name}}</span>
+ </button>
+ </md-menu>
+ <span *ngIf="nfRegistryService.perspective === 'administration'"> / Administration</span>
+ <span *ngIf="(nfRegistryService.perspective === 'explorer') && nfRegistryService.bucket.id"
+ [mdMenuTriggerFor]="availableBucketsMenu"> / {{nfRegistryService.bucket.name}}<i
+ class="fa fa-caret-down pad-left-sm" aria-hidden="true"></i></span>
+ <span *ngIf="nfRegistryService.perspective === 'explorer' && nfRegistryService.registry.id && !nfRegistryService.bucket.id"
+ [mdMenuTriggerFor]="availableBucketsMenu"> / All<i class="fa fa-caret-down pad-left-sm"
+ aria-hidden="true"></i></span>
+ <md-menu #availableBucketsMenu="mdMenu" [overlapTrigger]="false">
+ <button md-menu-item
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}">
+ <span>All buckets...</span>
+ </button>
+ <button md-menu-item *ngFor="let bucket of nfRegistryService.buckets"
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}/{{bucket.id}}">
+ <span>{{bucket.name}}</span>
+ </button>
+ </md-menu>
+ <span *ngIf="nfRegistryService.perspective === 'explorer' && nfRegistryService.droplet.id"
+ [mdMenuTriggerFor]="availableDropletsMenu"> / {{nfRegistryService.droplet.name}}<i
+ class="fa fa-caret-down pad-left-sm" aria-hidden="true"></i></span>
+ <span [mdMenuTriggerFor]="availableDropletsMenu"
+ *ngIf="nfRegistryService.perspective === 'explorer' && nfRegistryService.bucket.id && !nfRegistryService.droplet.id"> / All<i
+ class="fa fa-caret-down pad-left-sm" aria-hidden="true"></i></span>
+ <md-menu #availableDropletsMenu="mdMenu" [overlapTrigger]="false">
+ <button md-menu-item
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}/{{nfRegistryService.bucket.id}}">
+ <span>All droplets...</span>
+ </button>
+ <button md-menu-item *ngFor="let droplet of nfRegistryService.droplets"
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}/{{nfRegistryService.bucket.id}}/{{droplet.id}}">
+ <span>{{droplet.name}}</span>
+ </button>
+ </md-menu>
+ </div>
+ <div id="nifi-registry-alerts-count" *ngIf="nfRegistryService.alerts.length > 0">
+ {{nfRegistryService.alerts.length}}
+ </div>
+ <button *ngIf="false" mdTooltip="Alerts" md-icon-button>
+ <i class="fa fa-bell" aria-hidden="true"></i>
+ </button>
+ <button md-ripple [@flyInOut] *ngIf="nfRegistryService.perspective === 'explorer'" md-icon-button
+ mdTooltip="Registry Administration"
+ routerLink="/nifi-registry/administration/{{nfRegistryService.registry.id}}/general">
+ <i class="fa fa-wrench" aria-hidden="true"></i>
+ </button>
+ <button md-ripple [@flyInOut] *ngIf="nfRegistryService.perspective === 'administration'" md-mini-fab
+ mdTooltip="Close settings and return to Explorer perspective."
+ routerLink="/nifi-registry/explorer/{{(nfRegistryService.explorerViewType) ? nfRegistryService.explorerViewType : 'grid-list'}}/{{nfRegistryService.registry.id}}">
+ <md-icon color="primary">close</md-icon>
+ </button>
+ </md-toolbar>
+ <div id="nf-registry-perspectives-container">
+ <router-outlet></router-outlet>
+ </div>
+ </div>
+</md-sidenav-container>
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.js
new file mode 100644
index 0000000..4c9263b
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.js
@@ -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.
+ */
+
+var ngCore = require('@angular/core');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var nfRegistryAnimations = require('nifi-registry/nf-registry.animations.js');
+
+function NfRegistry(nfRegistryService, changeDetectorRef) {
+ this.nfRegistryService = nfRegistryService;
+ this.cd = changeDetectorRef;
+};
+
+NfRegistry.prototype = {
+ constructor: NfRegistry,
+
+ ngOnInit: function () {
+ var self = this;
+ this.nfRegistryService.sidenav = this.sidenav;
+ this.nfRegistryService.getRegistries().then(function (registries) {
+ self.nfRegistryService.registries = registries;
+ });
+ },
+
+ ngAfterViewChecked: function () {
+ // since the child views are updating the nfRegistryService values that are used to display
+ // the breadcrumbs in this component's view we need to manually detect changes at the correct
+ // point in the lifecycle.
+ this.cd.detectChanges();
+ }
+};
+
+NfRegistry.annotations = [
+ new ngCore.Component({
+ selector: 'nf-registry-app',
+ template: require('./nf-registry.html!text'),
+ queries: {
+ sidenav: new ngCore.ViewChild('sidenav')
+ },
+ animations: [nfRegistryAnimations.flyInOutAnimation]
+ })
+];
+
+NfRegistry.parameters = [NfRegistryService, ngCore.ChangeDetectorRef];
+
+module.exports = NfRegistry;
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
new file mode 100644
index 0000000..9e83795
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.module.js
@@ -0,0 +1,60 @@
+/*
+ * 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 ngMoment = require('angular2-moment');
+var NfRegistryRoutes = require('nifi-registry/nf-registry.routes.js');
+var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
+var NfRegistry = require('nifi-registry/nf-registry.js');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var NfPageNotFoundComponent = require('nifi-registry/components/page-not-found/nf-registry-page-not-found.js');
+var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
+var NfRegistryExplorerGridListViewer = require('nifi-registry/components/explorer/grid-list/nf-registry-explorer-grid-list-viewer.js');
+var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
+var NfRegistryGeneralAdministration = require('nifi-registry/components/administration/general/nf-registry-general-administration.js');
+var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
+var NfRegistryAddUser = require('nifi-registry/components/administration/users/add/nf-registry-add-user.js');
+var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
+var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
+var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
+var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
+var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
+var NfRegistryBucketGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/nf-registry-bucket-grid-list-viewer.js');
+var NfRegistryDropletGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/droplet/nf-registry-droplet-grid-list-viewer.js');
+var fdsCore = require('@fluid-design-system/core');
+
+function NfRegistryModule() {
+};
+
+NfRegistryModule.prototype = {
+ constructor: NfRegistryModule
+};
+
+NfRegistryModule.annotations = [
+ new ngCore.NgModule({
+ imports: [
+ ngMoment.MomentModule,
+ fdsCore,
+ NfRegistryRoutes
+ ],
+ declarations: [FdsDemo, NfRegistry, NfRegistryExplorer, NfRegistryExplorerGridListViewer, NfRegistryAdministration, NfRegistryGeneralAdministration, NfRegistryUsersAdministration, NfRegistryUserDetails, NfRegistryUserPermissions, NfRegistryBucketPermissions, NfRegistryAddUser, NfRegistryWorkflowAdministration, NfRegistryGridListViewer, NfRegistryBucketGridListViewer, NfRegistryDropletGridListViewer, NfPageNotFoundComponent],
+ providers: [NfRegistryService],
+ bootstrap: [NfRegistry]
+ })
+];
+
+module.exports = NfRegistryModule;
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.routes.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.routes.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.routes.js
new file mode 100644
index 0000000..46bcbec
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.routes.js
@@ -0,0 +1,104 @@
+/*
+ * 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 ngRouter = require('@angular/router');
+var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
+var NfPageNotFoundComponent = require('nifi-registry/components/page-not-found/nf-registry-page-not-found.js');
+var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
+var NfRegistryExplorerGridListViewer = require('nifi-registry/components/explorer/grid-list/nf-registry-explorer-grid-list-viewer.js');
+var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
+var NfRegistryGeneralAdministration = require('nifi-registry/components/administration/general/nf-registry-general-administration.js');
+var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
+var NfRegistryAddUser = require('nifi-registry/components/administration/users/add/nf-registry-add-user.js');
+var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
+var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
+var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
+var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
+var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
+var NfRegistryBucketGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/nf-registry-bucket-grid-list-viewer.js');
+var NfRegistryDropletGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/droplet/nf-registry-droplet-grid-list-viewer.js');
+
+var NfRegistryRoutes = new ngRouter.RouterModule.forRoot([{
+ path: 'nifi-registry/explorer',
+ component: NfRegistryExplorer,
+ children: [{
+ path: 'grid-list',
+ component: NfRegistryExplorerGridListViewer,
+ children: [{
+ path: ':registryId',
+ component: NfRegistryGridListViewer,
+ children: [{
+ path: ':bucketId',
+ component: NfRegistryBucketGridListViewer,
+ children: [{
+ path: ':dropletId',
+ component: NfRegistryDropletGridListViewer
+ }]
+ }]
+ }]
+ }]
+ // canActivate: [AuthGuard] //TODO: https://angular.io/api/router/CanActivate https://scotch.io/tutorials/routing-angular-2-single-page-apps-with-the-component-router
+}, {
+ path: 'nifi-registry/fluid-design-system',
+ component: FdsDemo
+}, {
+ path: 'nifi-registry/administration/:registryId',
+ component: NfRegistryAdministration,
+ children: [{
+ path: '',
+ redirectTo: 'general',
+ pathMatch: 'full'
+ }, {
+ path: 'general',
+ component: NfRegistryGeneralAdministration
+ }, {
+ path: 'users',
+ component: NfRegistryUsersAdministration
+ }, {
+ path: 'workflow',
+ component: NfRegistryWorkflowAdministration
+ }]
+}, {
+ path: 'nifi-registry',
+ redirectTo: '/nifi-registry/explorer/grid-list/23f6cc59-0156-1000-06b4-2b0810089090',
+ pathMatch: 'full'
+}, {
+ path: '',
+ redirectTo: '/nifi-registry/explorer/grid-list/23f6cc59-0156-1000-06b4-2b0810089090',
+ pathMatch: 'full'
+}, {
+ path: '**',
+ component: NfPageNotFoundComponent
+}, {
+ path: 'user/details/:userId',
+ component: NfRegistryUserDetails,
+ outlet: 'sidenav'
+}, {
+ path: 'user/permissions/:userId',
+ component: NfRegistryUserPermissions,
+ outlet: 'sidenav'
+}, {
+ path: 'user/add',
+ component: NfRegistryAddUser,
+ outlet: 'sidenav'
+}, {
+ path: 'bucket/permissions/:bucketId',
+ component: NfRegistryBucketPermissions,
+ outlet: 'sidenav'
+}]);
+
+module.exports = NfRegistryRoutes;
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/nifi-registry/blob/7fa56bea/nifi-registry-web-ui/src/main/webapp/nf-registry.spec.js
----------------------------------------------------------------------
diff --git a/nifi-registry-web-ui/src/main/webapp/nf-registry.spec.js b/nifi-registry-web-ui/src/main/webapp/nf-registry.spec.js
new file mode 100644
index 0000000..7ed1206
--- /dev/null
+++ b/nifi-registry-web-ui/src/main/webapp/nf-registry.spec.js
@@ -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.
+ */
+
+var NfRegistryRoutes = require('nifi-registry/nf-registry.routes.js');
+var ngCoreTesting = require('@angular/core/testing');
+var ngCommon = require('@angular/common');
+var FdsDemo = require('nifi-registry/components/fluid-design-system/fds-demo.js');
+var NfRegistry = require('nifi-registry/nf-registry.js');
+var NfRegistryService = require('nifi-registry/services/nf-registry.service.js');
+var NfPageNotFoundComponent = require('nifi-registry/components/page-not-found/nf-registry-page-not-found.js');
+var NfRegistryExplorer = require('nifi-registry/components/explorer/nf-registry-explorer.js');
+var NfRegistryExplorerGridListViewer = require('nifi-registry/components/explorer/grid-list/nf-registry-explorer-grid-list-viewer.js');
+var NfRegistryAdministration = require('nifi-registry/components/administration/nf-registry-administration.js');
+var NfRegistryGeneralAdministration = require('nifi-registry/components/administration/general/nf-registry-general-administration.js');
+var NfRegistryUsersAdministration = require('nifi-registry/components/administration/users/nf-registry-users-administration.js');
+var NfRegistryAddUser = require('nifi-registry/components/administration/users/add/nf-registry-add-user.js');
+var NfRegistryUserDetails = require('nifi-registry/components/administration/users/details/nf-registry-user-details.js');
+var NfRegistryUserPermissions = require('nifi-registry/components/administration/users/permissions/nf-registry-user-permissions.js');
+var NfRegistryBucketDetails = require('nifi-registry/components/administration/workflow/buckets/details/nf-registry-bucket-details.js');
+var NfRegistryBucketPermissions = require('nifi-registry/components/administration/workflow/buckets/permissions/nf-registry-bucket-permissions.js');
+var NfRegistryWorkflowAdministration = require('nifi-registry/components/administration/workflow/nf-registry-workflow-administration.js');
+var NfRegistryGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/nf-registry-grid-list-viewer.js');
+var NfRegistryBucketGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/nf-registry-bucket-grid-list-viewer.js');
+var NfRegistryDropletGridListViewer = require('nifi-registry/components/explorer/grid-list/registry/bucket/droplet/nf-registry-droplet-grid-list-viewer.js');
+var fdsCore = require('@fluid-design-system/core');
+
+describe('NfRegistry Component', function () {
+ var comp;
+ var fixture;
+
+ beforeEach(ngCoreTesting.async(function () {
+ ngCoreTesting.TestBed.configureTestingModule({
+ imports: [
+ fdsCore,
+ NfRegistryRoutes
+ ],
+ declarations: [FdsDemo, NfRegistry, NfRegistryExplorer, NfRegistryExplorerGridListViewer, NfRegistryAdministration, NfRegistryGeneralAdministration, NfRegistryUsersAdministration, NfRegistryUserDetails, NfRegistryUserPermissions, NfRegistryBucketDetails, NfRegistryBucketPermissions, NfRegistryAddUser, NfRegistryWorkflowAdministration, NfRegistryGridListViewer, NfRegistryBucketGridListViewer, NfRegistryDropletGridListViewer, NfPageNotFoundComponent],
+ providers: [NfRegistryService, {provide: ngCommon.APP_BASE_HREF, useValue: '/'}],
+ bootstrap: [NfRegistry]
+ });
+ }));
+
+ it('should create component', function () {
+ fixture = ngCoreTesting.TestBed.createComponent(NfRegistry);
+ fixture.detectChanges();
+ comp = fixture.componentInstance;
+ expect(comp).toBeDefined()
+ });
+});
\ No newline at end of file