tree: 98dd48f4f269f87f691100d0f896f732e8a44853 [path history] [tgz]
  1. addon/
  2. app/
  3. config/
  4. tests/
  5. vendor/
  6. .bowerrc
  7. .editorconfig
  8. .ember-cli
  9. .gitignore
  10. .jshintrc
  11. .npmignore
  12. .travis.yml
  13. .watchmanconfig
  14. bower.json
  15. ember-cli-build.js
  16. index.js
  17. LICENSE.md
  18. package.json
  19. README.md
  20. testem.json
contrib/views/wfmanager/src/main/resources/ui/externaladdons/hdfs-directory-viewer/README.md

Hdfs-directory-viewer

Ember Addon to view the HDFS file system.

Different Ambari views can use this in their view. Common code should be usable in every view.

How to use it

Including it in dependant project

Add the following code in package.json of the dependant view

"name": "files",
"ember-addon": {
	"paths": [
	  "../../../../../commons/src/main/resources/ui/hdfs-directory-viewer"
	]
}

paths is an array which includes all the addons shares in commons library. The entries should be the relative path to the addon in this commons repository.

Including the UI dependencies in the dependent project

As we are going to include the component using the ember-addon config in package.json and not by the ember install way, the UI dependencies also has to be included in the dependent projects bower.json file if not already added.

"bootstrap": "~3.3.6",
"bootstrap-treeview": "~1.2.0",
"font-awesome": "~4.5.0"

Overriding configs in dependant project

Create a util object in utils directory using ember generate util <object name> and override it as follows:

import ViewerConfig from 'hdfs-directory-viewer/utils/viewer-config';

export default ViewerConfig.extend({
  showOnlyDirectories: true,

  expandIcon: 'fa fa-chevron-right',
  collapseIcon: 'fa fa-chevron-down',

  listDirectoryUrl(pathParams) {
    return `/api/v1/views/FILES/versions/1.0.0/instances/files/resources/files/fileops/listdir?${pathParams}`;
  }
});

All the functions and attributes in hdfs-directory-viewer/utils/viewer-config can be overriden

Passing the object to the view template

import Ember from 'ember';
import MyViewerConfig from '../utils/my-viewer-config';

export default Ember.Controller.extend({
  config: MyViewerConfig.create(),
  actions: {
    viewerError: function() {
      console.log("Failed to fetch the content!!!");
    },
    viewerSelectedPath: function(data) {
      console.log(`User selected: path: ${data.path}, isDirectory: ${data.isDirectory}`);
    }
  }
});
...
<div class="directory-viewer-wrap">
  {{directory-viewer
    config=config
    errorAction="viewerError"
    pathSelectAction="viewerSelectedPath"
  }}
</div>
...