| commit | 438cdd716f212ab6eae51c1af5d86a5587c2ae73 | [log] [tgz] |
|---|---|---|
| author | Max Chu <maxmchu@gmail.com> | Wed Aug 16 16:00:54 2017 -0700 |
| committer | Max Chu <maxmchu@gmail.com> | Wed Aug 16 16:25:01 2017 -0700 |
| tree | e116630b8b5b50628c883563b9118ab200787b1f | |
| parent | 5461a7c733f868a4c84661fa49a37212d7ab6f80 [diff] |
xos-sample-gui-extension cleanup and update with new documentation Change-Id: I6b70f5127ea631cfdd1f8a372a51c20f547e9c44
To install an extension, add the following to the profile manifest .yml file intended to be deployed inbuild/platform-install/ , and deploy with ansible-playbook -i inventory/{PROFILE_NAME} deploy-xos-playbook.yml
enabled_gui_extensions:
- name: sample
path: orchestration/xos-sample-gui-extension
NOTE: the name field must match the subdirectory specified in conf/app/gulp.conf.js (eg: dist/extensions/sample)
To begin development, we recommend copying over this sample extension over to the appropriate area in your file system:
gui in the service's xos folder as follows: orchestration/xos_services/service_name/xos/gui/xos-gui-extension-name in the cord/orchestration folder.Additional necessary files (such as stylesheets or config files) can be added to the profile manifest as follows, with xos-sample-extension/src/ as the root.
enabled_gui_extensions: - name: sample path: orchestration/xos-sample-gui-extension extra_files: - app/style/style.css
During development, you may find it necessary to create separate config files in order to include other files used in your extension (such as images). The path to your extension may vary depending on whether you are running it locally (./xos/extensions/extension-name) vs. on a container in production (./extensions/extension-name).
You can create separate customconfig.local.js and customconfig.production.js files in the conf/ folder, and then edit the following portion of the appropriate webpack.conf.js file as follows:
new CopyWebpackPlugin([ { from: `./conf/app/app.config.${env}.js`, to: `app.config.js` }, { from: `./conf/app/style.config.${brand}.js`, to: `style.config.js` }, // add your file here { from: `./conf/app/customconfig.local.js`, to: `customconfig.js`} ]),
webpack.conf.js will be used in a local development environment, such as when running npm start
webpack-dist.conf.js will be used in a production container after deploying a profile.
Used to create custom navigation links in the left navigation panel.
Provides easy access to model ngResources provided by an XOS service. Can be used as follows:
import {Subscription} from 'rxjs/Subscription; export class ExampleComponent { static $inject = ['XosModelStore]; public resource; private modelSubscription : Subscription; constructor( private XosModelStore: any, ){} $onInit() { this.modelSubscription = this.XosModelStore.query('SampleModel', '/sampleservice/SampleModels').subscribe( res => { this.resource = res; } ); } } export const exampleComponent : angular.IComponentOptions = { template: require('./example.component.html'), controllerAs: 'vm', controller: ExampleComponent }
Allows for the creation of custom user keyboard shortcuts. See the provided components/demo.ts as an example.
Allows for the injection of components into the XOS GUI by specifying a target element ID. Useful IDs include:
#dashboard-component-container: the dashboard as seen on the XOS home#side-panel-container: a side panel that can slide out from the right. However, there is also a XosSidePanel service that can make development easier.Makes the injection of a custom side panel somewhat easier (no need to specify a target)