The PNDA console frontend provides an overview of all the PNDA components in real time.
It is a web application implemented in Node.js, and has dependencies on Grunt, Twitter Bootstrap, AngularJS, AngularStrap, [CoffeeScript], LESS and GreenSock.
The PNDA console provides a bird's eye view of a PNDA cluster, organized by tab into the following pages:
The home page shows health statistics of various different components which make up PNDA. Components are grouped into categories, including data distribution, data processing, data storage, applications, etc.
Components are displayed in green if everything is functioning properly, yellow if there is a warning, or red if there is an error. Some components show additional details on the home page, such as the amount of data in the HDFS file system. Click on the (i) icon next to any component to see a popup with more information.
The metrics page lists the metrics for all components in a single table. In addition, it includes key performance indicators (KPIs) for installed applications.
You can filter the list by typing part of a metric name into the search field. For example, type HDFS to match hadoop.HDFS.health, hadoop.HDFS.files_total, etc.
Any warnings will be displayed in yellow, and any errors will be displayed in red. The overall platform health section at the top of the page shows an overview of all warnings and errors. Click the More Info link for more information about a warning or error.
The packages page lets you browse available packages, and packages that have been deployed. You can deploy or undeploy an individual package. Packages are independently deployable units of application layer functionality. Each package consists of one or more components, each of which has a defined type.
The apps page lets you create and manage applications, which are instances of packages. You can see the status of each application, and start or stop them. Click an application name for more detailed information, with tabs for the overview, deployment properties, logs, statistics and metrics (application key performance indicators, or KPIs).
The datasets page lets you manage the data retention policy of each dataset in the cluster. The mode popup menu lets you choose whether to archive or delete data that has exceeded the capacity. The policy popup menu lets you choose whether to limit data by age in days, or size in gigabytes. After you have made changes, click the Save button to review and confirm the changes that will be made.
- Persistence store: Redis
- AngularJS on the client
- CSS based on Twitter's bootstrap
- Powered by Grunt.js
- Test written using frisby
- Build supporting jshint, jscs, jsdocs to lint code & indicate errors if any.
- Twitter's bootstrap with LESS templates processing integrated into the build
- Jenkins integration
The following diagram shows an overview of the PNDA console:
In console-frontend, you have the following structure:
node_modulescontains build tasks for Grunt along with other, user-installed, Node packagesjscontains all the javascript files.confcontains all the configuration filespartialscontains all HTML files.lesscontains all the LESS files used.csscontains all the CSS files.
If you are provision a PNDA, console will be automatically up and running for you and can be accessed using this URL:
http://<edge-node-ip>
Note: Replace the IP with the edge node IP of your cluster.
We use nginx web server to run console in a PNDA cluster.
The console front-end application uses Grunt as an automation tool.
Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. Grunt 0.4.x requires stable Node.js versions >= 0.8.0. Odd version numbers of Node.js are considered unstable development versions.
Before setting up Grunt ensure that your npm is up-to-date by running npm update -g npm (this might require sudo on certain systems).
In order to get started, you'll want to install Grunt's command line interface (CLI) globally. You may need to use sudo (for OSX, *nix, BSD etc) or run your command shell as Administrator (for Windows) to do this.
$ npm install -g grunt-cliDependencies are listed in package.json. The only thing you need to do is to the run the following command from the console-frontend directory in order to download all the dependencies:
$ npm installFor development, we're running a simple express webserver running on node.js.
The following command does a build (compiles LESS files into CSS files), launches a webserver (which will open a window in your default browser), and watch for modifications on specified files or directories to automatically recompile your LESS files and live reload your page when anything changes.
$ grunt serveYou can also specify the port to run the node app on, and the live reload port with the following command:
$ grunt serve --port 8009 --lrport 1339For deployment, grunt is used to process the source into a website that can be served by nginx. For example, LESS files are compiled to CSS, and [CoffeeScript] files are compiled to JavaScript.