Skip to content

Instantly share code, notes, and snippets.

@hparra

hparra/fulcrum.console.md

Last active August 25, 2023 19:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hparra/c55f8caf8b2f0ae02548 to your computer and use it in GitHub Desktop.
Save hparra/c55f8caf8b2f0ae02548 to your computer and use it in GitHub Desktop.
Download ZIP
fulcrum.console Conversion Notes
Raw
fulcrum.console.md

fulcrum.console Conversion Notes

When possible we try to group changes.

Root

dotfiles

Add predefs to .jshintrc

{
  "PS": true,
  "$": true,
  "hopscotch": true
}

Directory Structure

Move core JS files to JS root:

mv app/js/runtime/application.js app/js/app.js
mv app/js/runtime/route.js app/js/route.js
mv app/js/runtime/router.js app/js/router.js
mv app/js/runtime/view.js app/js/view.js

Specify correct location of files in Brocfile.js:

npm install broccoli-file-remover --save-dev
npm install broccoli-merge-trees --save-dev
// in Brocfile.js

var remove = require('broccoli-file-remover');
var mergeTrees = require('broccoli-merge-trees');
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

// Redefine this method to improve performance
EmberApp.prototype.removeStylesAndTemplates = function(tree) {
  return remove(tree, {
    paths: ['less', 'styles', 'hbs']
  });
};

var app = new EmberApp({
  name: 'ps/console',
  trees: {
    app: mergeTrees(['app', 'app/js'], {
      overwrite: true
    }),
    styles: 'app/less',
    templates: 'app/hbs'
  },
  outputPaths: {
    app: {
      css: '/assets/app.css',
      js: '/assets/app.js'
    }
  }
});

Rename Application controller file:

mv app/js/controller/application.js app/js/controller/app.js

Index

Replace index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/img/icons/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-precomposed.png">
    <title>Pivotshare Publisher Console</title>

    {{BASE_TAG}}
    {{CONFIG_META}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/app.css">
  </head>
  <body>

    <!--[if lt IE 8]>
    <p class="browsehappy">
      You are using an <strong>outdated</strong> browser. Please
      <a href="http://browsehappy.com/">upgrade your browser</a>
      to improve your experience.
    </p>
    <![endif]-->

    <!-- Flex-related JS -->
    <!-- These scripts MUST be loaded first! See CONSOLE-349 -->
    <script src="//console.pivotshare.com/scripts/externalUploadUtils.js"></script>
    <script src="//console.pivotshare.com/scripts/md5.js"></script>
    <script src="//console.pivotshare.com/scripts/externalUpload.js"></script>

    <!-- Ember -->
    <script src="assets/vendor.js"></script>
    <script src="assets/app.js"></script>

    <!-- filepicker.io -->
    <script src="//api.filepicker.io/v1/filepicker.js"></script>
    <script src="//api.filepicker.io/v1/filepicker_debug.js"></script>

  </body>
</html>

Scripts

config/environment.js

/* jshint node: true */

module.exports = function(environment) {
  var ENV = {
    modulePrefix: 'ps/console',
    environment: environment,
    baseURL: '/',
    locationType: 'auto',
    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      }
    },

    APP: {
      // Here you can pass flags/options to your application instance
      // when it is created
      ENCODE_TRANSITION_ERRORS: true
    }
  };

  if (environment === 'development') {
    ENV.APP.LOG_RESOLVER = true;
    ENV.APP.LOG_ACTIVE_GENERATION = true;
    ENV.APP.LOG_TRANSITIONS = true;
    ENV.APP.LOG_TRANSITIONS_INTERNAL = false;
    ENV.APP.LOG_VIEW_LOOKUPS = true;
    ENV.APP.ENCODE_TRANSITION_ERRORS = false;
  }

  if (environment === 'test') {
    // Testem prefers this...
    ENV.baseURL = '/';
    ENV.locationType = 'auto';

    // keep test console output quieter
    ENV.APP.LOG_ACTIVE_GENERATION = false;
    ENV.APP.LOG_VIEW_LOOKUPS = false;

    ENV.APP.rootElement = '#ember-testing';
  }

  if (environment === 'production') {

  }

  return ENV;
};

Merge your third-party bower dependencies:

{
  "bootstrap": "3.1.1",
  "bootstrap-tokenfield": "^0.12.0",
  "d3": "3.4.3",
  "datatables": "1.10.0",
  "datatables-plugins": "2ba2b09b5216563492d506a0d59998634fdc6f51",
  "ember-animated-outlet": "1.0.0-beta.2",
  "ember-computed-injection": "git://github.com/pivotshare/ember-computed-injection.git#c10d28fbb31896857f2b8d42c327071ee0d96c68",
  "ember-computed-content-controller": "~0.2.0",
  "ember-simple-auth": "git://github.com/simplabs/ember-simple-auth-component#0.5.1",
  "ember-string-interpolate": "git://github.com/jayphelps/ember-string-interpolate.git#904847823e0655d9745f3d9668902dea886cae3a",
  "hopscotch": "git://github.com/pivotshare/hopscotch.git#v0.2.2-yeah",
  "jcrop": "~0.9.12",
  "jquery.transit": "0.9.9",
  "lesshat": "~2.0.15",
  "momentjs": "~2.5.1",
  "nvd3": "~1.1.15",
  "pace": "0.5.1"
}

Add all your third-party JS and ember plugins via the Brocfile.js:

app.import('vendor/date-format/date-format.js');

// JavaScript library for manipulating documents based on data.
// https://github.com/mbostock/d3
app.import('bower_components/d3/d3.js');

// A reusable chart library for d3.js.
// https://github.com/novus/nvd3
app.import('bower_components/nvd3/nv.d3.js');

// Parse, validate, manipulate, and display dates in javascript.
// https://github.com/moment/moment/
app.import('bower_components/momentjs/moment.js');

// jQuery CSS transistions.
// https://github.com/rstacruz/jquery.transit
app.import('bower_components/jquery.transit/jquery.transit.js');

// Image Cropping Plugin for jQuery.
// https://github.com/tapmodo/Jcrop
app.import('bower_components/jcrop/js/jquery.Jcrop.js');

// jQuery tag/token input plugin for Twitter's Bootstrap.
// https://github.com/sliptree/bootstrap-tokenfield
app.import('bower_components/bootstrap-tokenfield/dist/bootstrap-tokenfield.js');

// Table plug-in for jQuery.
// https://github.com/DataTables/DataTables
app.import('bower_components/datatables/media/js/jquery.dataTables.js');
app.import('bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.js');

// Framework to make it easy for developers to add product tours to their pages.
// http://github.com/pivotshare/hopscotch
app.import('bower_components/hopscotch/dist/js/hopscotch.js');

// Computed property for injecting any dependency into an Ember class definition.
// https://github.com/jayphelps/ember-computed-injection
app.import('bower_components/ember-computed-injection/ember-computed-injection.js');

// String interpolation as a computed property.
// https://github.com/jayphelps/ember-string-interpolate
app.import('bower_components/ember-string-interpolate/ember-string-interpolate.js');

// Computed property for injecting a unique instance of a content controller
// https://github.com/jayphelps/ember-computed-content-controller
app.import('bower_components/ember-computed-content-controller/ember-computed-content-controller.js');

// Animated route transitions.
// https://github.com/billysbilling/ember-animated-outlet
app.import('bower_components/ember-animated-outlet/dist/ember-animated-outlet.js');

See "Upgrading ember-simple-auth" and "fulcrum.core"

Styles (LESS)

Install LESS preprocessor: npm install broccoli-less-single --save-dev

Prefix bower_components/ to all @import paths:

// app/less/app.less
@import (less) "bower_components/nvd3/nv.d3.css";
@import (less) "bower_components/ember-animated-outlet/dist/ember-animated-outlet.css";
@import (less) "bower_components/jcrop/css/jquery.Jcrop.css";
@import (less) "bower_components/datatables/media/css/jquery.dataTables.css";
@import (less) "bower_components/bootstrap-tokenfield/dist/css/bootstrap-tokenfield.css";
//@import (less) "hopscotch/dist/css/hopscotch.css";
@import "bower_components/lesshat/build/lesshat";

Proxy Server

Create a proxy server for the API:

ember generate proxy api https://console.pivotshare.com

Set correct HOST header:

// See https://github.com/nodejitsu/node-http-proxy

var proxyPath = '/api';

// ...

proxy.on('proxyReq', function(proxyReq, req, res, options) {
  proxyReq.setHeader('Host', 'console.pivotshare.com');
});

Javascript

Views

Correct View import in all views since view.js is no longer in runtime folder: import View from 'ps/console/view';

# remember to use 'gsed' on mac or else this script will create backups
grep -lr "import View from 'ps/console/runtime/view';" app/js/views/ | xargs sed -i -e "s=ps/console/runtime/view=ps/console/view="

Upgrading ember-simple-auth

Upgrade ember-simple-auth to v0.5.3 and include appropriate app.import statements

npm install ember-simple-auth#0.5.3 --save

Correct import statements:

// app/js/routes/application.js
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application_route_mixin';

// app/js/routes/authorized.js
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated_route_mixin';

Import ember-simple-auth properly. Don't rename imported module.

// app/js/authenticators/oauth2.js
import Authenticator from 'ember-simple-auth-oauth2/authenticators/oauth2';

// app/js/authorizers/oauth2.js
import OAuth2 from 'ember-simple-auth-oauth2/authorizers/oauth2';

// app/js/controllers/sign-in.js
import AuthenticationControllerMixin from 'ember-simple-auth/mixins/authentication_controller_mixin';

// app/js/initializers/authentication.js
import setup from 'ember-simple-auth/setup';

Initializers

Edit initializers in app/js/initializers/ to export objects. Do not call Ember.Application.initializer. Remove the now unused import Ember line.

fulcrum.core

Include fulcrum.core:

// fulcrum.core
// Is there a better way to do this?
// Or should we make fulcrum-core an addon?
app.import('vendor/fulcrum-core/dist/fulcrum-core-0.0.1.amd.js', {
  exports: {
    'ps/core': ['default'], // TODO: may be wrong
    'ps/core/graphics/color': ['default'],
    'ps/core/runtime/array-controller': ['default'],
    'ps/core/runtime/application': ['default'],
    'ps/core/runtime/collection-view': ['default'],
    'ps/core/runtime/controller': ['default'],
    'ps/core/runtime/controller-mixin': ['default'],
    'ps/core/runtime/component': ['default'],
    'ps/core/runtime/link-view': ['default'],
    'ps/core/runtime/object': ['default'],
    'ps/core/runtime/object-controller': ['default'],
    'ps/core/runtime/object-mixin': ['default'],
    'ps/core/runtime/route': ['default'],
    'ps/core/runtime/text-area': ['default'],
    'ps/core/runtime/text-field': ['default'],
    'ps/core/runtime/view': ['default'],
    'ps/core/runtime/view-mixin': ['default'],
    'ps/core/utils/requestFullscreen': ['default']
  }
});

Query Params

Check for use of old interpolated query params: grep -r "queryParams: \['.*:.*\'],$" app/js

# GENERAL: gsed -i s/"'camelCase:snake_case'"/"{ camelCase: 'snake_case' }"/ $(find app -type f -name '*.js') # gsed is GNU sed
gsed -i s/"'startDate:start_date'"/"{ startDate: 'start_date' }"/ $(find app/js/controllers -type f -name '*.js')
gsed -i s/"'endDate:end_date'"/"{ endDate: 'end_date' }"/ $(find app/js/controllers -type f -name '*.js')
gsed -i s/"'featureType:feature_type'"/"{ featureType: 'feature_type' }"/ $(find app/js/controllers -type f -name '*.js')

Also change start_date and end_date to camelCase in:

  • app/js/mixins/routes/report.js
  • app/hbs/components/ps-time-range-selector.hbs

Environments

Import ENV wherever it is used: import ENV from 'ps/console/config/environment';

Double-check where this is happening: grep -lr window.ENV app/js

window.PS

In app/js/app.js replace instances of App with Ember.Namespace.NAMESPACES_BY_ID[''].

Note that the application does not have a name. How can we name it, and/or access it via window?

Hackery & Unrelated Fixes

Comment out majority of SignInRoute.setupController in app/js/routes/sign-in.js.

Implement this fix in app/js/serializers/application.js

In app/js/adapters/medium.js

// `|| !get(record, 'channel.id'` fixes bug where "Most Popular Video This Month" API call had undefined channel id
// channel.id was not in record
if (!record || !get(record, 'channel.id') ) {

WARNING: Several Adapter have almost the same exact code, but not this change. Unsure if they are needed there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment