Skip to content

Commit

Permalink
Merge pull request #261 from xaun/mnoe-dev-toolkit
Browse files Browse the repository at this point in the history
Mnoe dev toolkit
  • Loading branch information
xaun authored Nov 25, 2016
2 parents 600d5ae + c1c6be5 commit d1f4ebc
Show file tree
Hide file tree
Showing 25 changed files with 910 additions and 256 deletions.
75 changes: 56 additions & 19 deletions DEVELOPER.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,33 +16,70 @@ Now you should an api key, api secret, and an organization associated to your Us

##### Steps to get impac loaded:

1. Terminal commands to load dependancies
Temporary instructions to get Impac! Angular running for development:

1. Create an account on http://impac-mnoe-uat.maestrano.io.
2. Fork impac-express (https://github.com/maestrano/impac-express) and clone it to your local machine
3. In the impac-express project, modify config/settings/development.yml as follow:

```ruby
impac:
protocol: https
host: api-impac-uat.maestrano.io
mno:
protocol: https
host: api-hub-uat.maestrano.io
```
npm install
bower install
4. In the impac-express project, create config/application.yml as follow:

```ruby
# Tenant Credentials
tenant_id: c6b44271-7334-0134-8df7-35f23abf243c
tenant_key: 4Vcpt_2GnCfhlyBYbN_bUQ

# Emailing platform
SPARKPOST_API_KEY: changeme

# Rails secret key
SECRET_KEY_BASE: e48e21d80b2943c1872f69fb3cf4f8a8c24bc9fa3abdc14549df2dc181d46bfb5698271fb4bc1511e45ba0633ef02b494985b67f6e418182014f95a5e600f808

# Google Tag Manager
google_tag_container: GTM-TH3MLB
```

2. Configuring with credentials & launching workspace
- Add your api_key & api_secret to the settings factory in the `workspace/index.js` file
5. Build and start the impac-express project:

```bash
bundle install
foreman start
```
6. Fork impac-angular (https://github.com/maestrano/impac-angular) and clone it to your local machine. _Note this method for running impac-angular is only valid from versions >= 1.4.5_.
7. In the impac-angular project, modify workspace/app/services/dev-settings.svc.js as follow:

```javascript
module.factory('settings', function () {
return {
// Credentials and endpoints
mno_url: 'https://uat.maestrano.io',
impac_url: 'https://api-impac-uat.maestrano.io',
api_key: 'YOUR_KEY',
api_secret: 'YOUR_SECRET',
var DEFAULTS = {
// API Endpoints
mnoeUrl: {
host: 'http://localhost:7000',
base: '/mnoe/jpi/v1'
},
impacUrl: {
host: 'https://api-impac-uat.maestrano.io',
base: '/api'
}
...
}
});
```
8. build and start the impac-angular project
3. There a few ways to prepare & launch the Impac Developer Workspace..
1. Run `gulp` or `gulp serve`, this will inject dependencies, serve impac-angular, and **live reload** on change.
2. Run `gulp serve:noreload`, if rebuilding the library on every change is using too much cpu - **you will need to run `gulp workspace` and refresh the page after every change**
2. Run `gulp workspace` to build and inject dependencies, the open the `workspace/index.html` file in a browser - **you will need to run `gulp workspace` and refresh the page after every change**
```bash
npm install
bower install
gulp
```
9. A new tab with the Developer Workspace will open in your browser, log-in with the email/password you've created at step 1.
10. You should be able to start coding in the project impac-angular: just saving any .coffee or .html file will automatically reload your Developer Workspace, applying your code.
11. To populate the Widgets and KPIs with data, integrate an App! I recommend Xero.
Note: Coming in a patch version soon you will be able to skip steps 2. to 5.
##### Workspace Architecture
Expand Down
8 changes: 6 additions & 2 deletions bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,18 @@
},
"devDependencies": {
"angular-mocks": "~1.4.0",
"angular-scenario": "~1.4.0"
"angular-scenario": "~1.4.0",
"AngularDevise": "angular-devise#^1.3.0",
"angular-ui-router": "^0.3.1",
"angular-cookies": "^1.5.8"
},
"license": "Copyright 2015 Maestrano Pty Ltd",
"repository": {
"type": "git",
"url": "git://github.com/maestrano/impac-angular.git"
},
"resolutions": {
"angular": "~1.4.0"
"angular": "1.4.14",
"angular-cookies": "^1.5.8"
}
}
2 changes: 2 additions & 0 deletions gulp/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ var $ = require('gulp-load-plugins')({
pattern: ['browser-*']
});

var proxyMiddleware = require('http-proxy-middleware');

function browserSyncInit(baseDir, browser) {
browser = browser === undefined ? 'default' : browser;

Expand Down
9 changes: 8 additions & 1 deletion gulp/workspace.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,19 @@

var gulp = require('gulp');
var wiredep = require('wiredep').stream;
var $ = require('gulp-load-plugins')();

/**
* Builds and injects dependencies into workspace/index.html
*/
gulp.task('workspace', ['build'], function () {
var injectFiles = gulp.src(['workspace/app/**/*.js', 'workspace/app/**/*.css'], {read: false});
var injectOptions = { relative: true };

return gulp.src('workspace/index.html')
.pipe(wiredep({}))
.pipe(wiredep({
devDependencies: true
}))
.pipe($.inject(injectFiles, injectOptions))
.pipe(gulp.dest('workspace'));
});
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^0.3.1",
"gulp-util": "^3.0.6",
"http-proxy-middleware": "^0.17.2",
"jasmine-core": "^2.4.1",
"karma": "~0.12.22",
"karma-chrome-launcher": "^0.1.4",
Expand Down
1 change: 1 addition & 0 deletions src/services/routes/routes.svc.coffee
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# provider for configuring http endpoints.
# TODO: REFACTOR THIS FOR MNOE AS DEFAULT + REVISE BASE PATHS DEFAULTS.
angular
.module('impac.services.routes', [])
.provider('ImpacRoutes', () ->
Expand Down
133 changes: 133 additions & 0 deletions workspace/app/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
// IMPAC! WORKSPACE
//--------------------------------------------------------
// PLEASE DO NOT COMMIT CHANGES TO THIS FILE.
// You can use `git add -p ./` to selectively add files to your git index.
// -------------------------------------------------------
var module = angular.module('impacWorkspace', [
'maestrano.impac',
'toastr',
'Devise',
'ui.router',
'ngCookies'
]);

// --
// The Developer Toolkit Workspace States.
// -------------------------------------------------------
module.config(function ($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/login');

$stateProvider
.state('workspace', {
abstract: true,
templateUrl: 'app/views/workspace/workspace.html',
controller: 'WorkspaceController',
controllerAs: 'main'
})
.state('workspace.login', {
url: '/login',
templateUrl: 'app/views/workspace/login/login.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.state('workspace.impac', {
url: '/impac',
templateUrl: 'app/views/workspace/impac/impac.html',
controller: 'ImpacController',
controllerAs: 'vm'
})
.state('workspace.settings', {
url: '/settings',
templateUrl: 'app/views/workspace/settings/settings.html',
controller: 'SettingsController',
controllerAs: 'vm'
});

});

// --
// Configure Angular Devise paths for mno-enterprise.
// -------------------------------------------------------
module.config(function (AuthProvider, DevSettingsProvider) {
var mnoeHostUrl = DevSettingsProvider.$get().defaults().mnoeUrl.host;
// Customize login
AuthProvider.loginMethod('POST');
AuthProvider.loginPath(mnoeHostUrl + '/mnoe/auth/users/sign_in.json');

// Customize logout
AuthProvider.logoutMethod('DELETE');
AuthProvider.logoutPath(mnoeHostUrl + '/mnoe/auth/users/sign_out.json');

// Customize register
AuthProvider.registerMethod('POST');
AuthProvider.registerPath(mnoeHostUrl + '/mnoe/auth/users');
});

// --
// Configure Angular $http to apply XSRF Token headers to CORS requests.
// -------------------------------------------------------
module.constant('CSRF', {
"headerTokenKey": 'X-XSRF-TOKEN',
"cookieTokenKey": 'XSRF-TOKEN'
});
module.config(function($httpProvider) {
// Allow "credentialed" requests that are aware of HTTP cookies and HTTP
// Authentication information.
$httpProvider.defaults.withCredentials = true;
});
module.run(function($http, DevSession) {
DevSession.create();
});

// --
// Impac! Angular Provider Service Configurations.
// -------------------------------------------------------
module.run(function (ImpacLinking, ImpacAssets, ImpacRoutes, ImpacTheming, ImpacDeveloper, DevUser, DevSettings) {

var defaults = DevSettings.defaults();

// Configure ImpacRoutes
// -------------------------------------------------------
ImpacRoutes.configureRoutes(DevSettings.buildRoutesConfig(defaults.mnoeUrl, defaults.impacUrl, defaults.multipleWatchableMode));


// Configure ImpacTheming - aesthetic and feature customisations across the app
// -------------------------------------------------------
ImpacTheming.configure({
dhbKpisConfig: {
enableKpis: true
},
alertsConfig: {
enableAlerts: true
},
dhbConfig: {
showDhbHeading: true,
dhbHeadingText: 'Your business at a glance, in real-time'
},
dhbSelectorConfig: {
selectorType: 'dropdown',
pdfModeEnabled: true
},
dhbSettings: {
syncApps: {
show: function() { return false; }
}
}
});

// Configure ImpacAssets - app asset file configurations
// -------------------------------------------------------
ImpacAssets.configure({
defaultImagesPath: '/dist/images',
})

// Configure ImpacDeveloper - developer toolkit specifc customisations
// -------------------------------------------------------
ImpacDeveloper.configure(DevSettings.buildDeveloperConfig(defaults.widgetsTemplates));

// Configure ImpacLinking - Links core callbacks required for impac-angular lib to run.
// -------------------------------------------------------
ImpacLinking.linkData(DevSettings.buildLinkingConfig(defaults.orgUid, defaults.mnoeUrl));

});
29 changes: 29 additions & 0 deletions workspace/app/services/dev-session.svc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// -------------------------------------------------------
// Impac! Angular DevSession Service
// --------
// Providing CSRF Support for Impac! Workspace.
// -------------------------------------------------------
angular.module('impacWorkspace').service('DevSession', function ($log, $http, $cookies, CSRF, DevSettings) {
var _self = this;

// Create a session and xsrf token - ping mnoe api so we get a valid XSRF cookie.
this.create = function () {
return $http.get(DevSettings.defaults().mnoeUrl.host + '/mnoe/auth/users/sign_in.json')
.success(function() {
_self.setCsrfHttpHeader();
});
};

// Angular Devise methods (e.g `Auth.currentUser()`) generate new sessions, this keeps the
// default http headers up to date, ensuring the session is maintained.
this.update = function () {
this.setCsrfHttpHeader();
};

// Set stored XSRF cookie as $http headers common.
this.setCsrfHttpHeader = function () {
$http.defaults.headers.common[CSRF.headerTokenKey] = $cookies.get(CSRF.cookieTokenKey);
};

return this;
});
Loading

0 comments on commit d1f4ebc

Please sign in to comment.