kpi-wdc/dj

World Data center webapp

World Data Center

Prerequisites

Required software:

• node.js (or io.js) is installed (better 0.11.x or newer) Install latest node.js using npm install -g n; n latest as root/admin user
• npm is installed (minimum 2.0, check with npm --version. Upgrade to newer npm with npm install -g npm and make sure new npm is in PATH with higher priority than the old one.
• mongodb is installed

Highly recommended:

• bower is installed (run npm install -g bower as admin)
• gulp is installed (run npm install -g gulp as admin)

Optional:

• karma is installed (run npm install -g karma` as admin)
• protractor is installed (run npm install -g protractor as admin)
• chrome and firefox (optional) are installed
• docker and docker-compose. Installation instructions - Ubuntu, Windows,

Build

To run this project from terminal run the following command:

 npm install
 npm start

OR if docker and docker-compose are installed (better suited for production usage):

docker build -t sochka/wdc .
docker-compose up

Intellij idea project has preconfigured run configurations.

API docs

To generate API documentation run gulp docs

Open docs/index.html to view documentation in the browser.

Debugging:

If you want to debug javascript code in Intellij Idea - set your breakpoints in .tmp/public, not in assets/. Otherwise the debugger won't stop at your breakpoints

Project style guides:

• MOST IMPORTANT: follow the existing code style
• Make sensible variable names
• Don't use git pull, use git pull --rebase or git up (git plugin) instead. You can run git config branch.master.rebase true to make git pull behave like git pull --rebase on project basis.
• Use commit names in format [SCOPE] explanation where SCOPE is a feature, subproject or component. Examples:
  • [build] Change gulp task
  • [front-end] added new feature
  • [hotfix] fixed mistake in previous commit
  • [test] added new tests
  • [travis] removed module
  • [heroku] changed env variables
• Use branches:
  • master branch for stable code synced from develop and bugfixes.
  • develop branch for code in development. Should be regularly merged into master
  • feature-branches for single features development. Should be merged into develop.
  • git tags on master branch to mark releases (like v0.4.3 or v1.0)

Used technologies

• git (version control)
• ES6/7 JavaScript (modules, async/await, classes, arrow functions etc...)
• Sails.JS (node.js MVC framework)
• npm (front-end dev. dependencies)
• bower (front-end dependencies)
• jspm (front-end dependencies)
• gulp (front-end task-runner)
• karma (front-end unit-test runner)
• protractor (end-to-end test runner)
• jasmine (test framework)
• angularjs (MVVM front-end framework)
• SystemJS (universal dependency loader)
• LESS (CSS replacement)
• jsdoc (JS documentation engine)
• travis (Continuous Integration)
• heroku (PaaS)
• gravatar (service for centralized user avatar (image) store)
• docker (deployment) (deployment)

Intellij Idea

The following steps will make your work with Intellij Idea more productive

1. Set JavaScript version - EcmaScript 6
2. Install TypeScript community stubs for front-end javascript dependencies.

Suggested intellij idea plugins:

• NodeJS
• gulp
• karma
• LESS
• gitignore (for syntax highlight)
• angularjs
• markdown
• EditorConfig
• EJS

Suggested Chrome extensions:

• angularjs batarang
• JetBrains IDE support

dj's Issues

Minification policy

What's our policy about minification? Should widget code/templates be minified?

If no - the speed will be very bad because of network latency.
If yes - we have to redeploy the whole app OR support some kind tool (e.g. gulp task through plugin) for live minification if new widgets are added etc...

Can widget assume it's in holder?

Should widgets use holder properties if they need? Can they assume they are always in a holder?

JSON editor as Widget Options Editor

Editor:
https://github.com/jdorn/json-editor
Angular directive:
https://github.com/rodikh/angular-json-editor
Demo:
http://jeremydorn.com/json-editor/?schema=N4IgLglmA2CmIC4QAVYCcDOB7AdiANOAJ4AO8SWARgFawDGYBIJaWZaksGioOAhgFtyoMKXIgMYNBBwBzJgBMudaSUi5EIAGIRMYAAR8cC/QBk+k/fyFMBM07DlgAFogAshJQDM+AV2iMSABS6LACRPoAIlhoeAC+hHyywsRkmjJgsMloirA+/oEATACshHY4EAK+AogAjAAcZXwAHpXViACcHQkgPgBuMVCwAPp0WNAxPKniktJyTF4xAnyBIGMTOYSQMOL9g5n665OeeX4BmgDEXj7FAAy3ID3JxuhTomlIszLyhI7tCABtEDLOALMJ8UEAXR6EzoKwgGgQIjEmiotAYTG2oKQpiwcPUeEILDY6E43CRaygRDeKM+Um+uXy5yQAGUjPotGgjHQIBgxo9CJIVil3jN6fMTkzVgBhACCAspoiFmRpHwk4p+ICUfNUBM0ABVnLz9MbnuhhSY/GAsMtIHDoNAIl5WAJ9C5YPoWLA+gjfBg3QB3LD6LwQWDQBTcLZhEjQYWaYDAHmiOIJfSJ5WwVNMAMrOiuCnJ6lIWHw3AAOiLTEzmlLBPLNdTqaJsDA5ORar4aC51MIizQts0YD4lFBWyg2JQrajIF8FQAjr5YABJTICclSJeEIbr1XiNH0RjjnaaVBH5isdhkvc3ulzTV/GqAtYrRRYTWUXQKJhoWBqCBjiAWDujkkKSmcqwKO+CrWCKtLqvejzNlqpwFIgAIduIUGarBmgAOoQpkORxNCqZAAAA&value=N4IgdghgtgpiBcIBSMBOMoE8AEARA9qmCADQgQDmc8ATAKxkBmEAboQJYAuMA+gMb4ANoQQgAxI0Z8ALHTqkQVMABM0oxhgiC4ZYXwid2+YvFB8umUQGUIYbADFUt8wGcBCl5wPUQAYQCCCuacmJ7e1rYOTmCuAiTYASAAvmQADjCcLggA2qAh6aLK+BQKkLCiAOpa3KjJALpJQA&theme=foundation5&iconlib=fontawesome4&object_layout=normal&show_errors=interaction

Add multiple SPAs support

Support:

• OAuth authentication
• SPA ownership by it's creator
• owner can grant write access to other users
• owner can make SPA public/private for all users.
• New SPA contains one empty page by default

Who is responsible for widget styling?

Who is responsible for widget styling?
3 options with drawbacks:

• If it's widget creator then all widgets look the same
• If it's page creator then he should know css
• If widget creator allows to customize everything through configuration - too many config options for the user & too much work for widget creator

Fix "no mapping found" warning

Fix the following warnings in tomcat logs

WARNING: No mapping found for HTTP request with URI [/dev-page] in DispatcherServlet with

Make good website design

• Should use rem instead of px. Follow foundation guidelines.
• mobile devices should be supported
• handle widescreen monitors betters.

Artefact and Metadatakey FetchType efficiency

Artefact and Metadatakey classes have FetchType.LAZY. This can have nagative impact on efficiency. Discover whether it is efficient.

Make up interface structure to provide CRUD for all aspects of an Artefact

Objects to JSON and back.

Discover Jackson or some other JSON <-> Object library and create mechanism for this transitions.

Allow page/holder/widget css class customization

Allow loading angular modules dynamically

Use $ocLazyLoad

angular-foundation

Use angular-foundation library for Foundation CSS styling in angular way. Improve app's design in general.

Links:
Foundation - http://foundation.zurb.com/
Angular-foundation - http://pineconellc.github.io/angular-foundation/
Angular - http://angularjs.org

PUT method may not be an appropriate choice.

Not all browsers support PUT method, some of them send POST instead.
Maybe it is more convenient to send by POST then to handle both?

Make 404 page constructed through the standard mechanism

add css service in angular

Add page development mode

Add Event type

1. Чтобы обрабатывать сообщения, надо где-то брать инф. о его структуре.

Add max-widgets and min-widgets properties in widget-holder

When user loads '/' don't redirect to /home but still show the same contents

But still show the same contents.

Add standard "design" tab in widget settings.

Supported options:

• overflow
• color
• border
• margin
• padding

Make page title a widget

Use index.html instead of index.jsp

index.jsp should be index.html for the following 2 purposes:

• no jsp dependency
• in jsp (unlike static html) if you change it's contents you have to restart the whole tomcat server

Improve build system (minification)

Use the following gulp plugins:

• https://www.npmjs.org/package/amd-optimize/
• https://github.com/yeoman/bower-requirejs
• https://www.npmjs.org/package/gulp-bower-files
• https://github.com/miickel/gulp-angular-templatecache
• https://www.npmjs.org/package/gulp-uglify
• https://www.npmjs.org/package/gulp-jsonminify
• https://www.npmjs.org/package/gulp-ng-annotate
• https://www.npmjs.org/package/humans-generator/
• https://www.npmjs.org/package/gulp-minify-html {empty: true}
• https://github.com/floatdrop/gulp-plumber
• https://www.npmjs.org/package/gulp-min-map
• https://www.npmjs.org/package/gulp-html-replace
• https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md
• https://github.com/jgable/gulp-cache
• gulp-htmlmin
• ng-strict-di directive

Use gulp-watch for live-building

Example gulpfile.js: https://github.com/jtomaszewski/ionic-angular-cordova-gulp-seed/blob/master/gulpfile.js
Recipies: https://github.com/gulpjs/gulp/tree/master/docs/recipes

REMINDER: don't use application cache. Use network cache instead.

Merge SPA configuration into one file

Provide inter-widget API's (like RPC)

[Server] - redirect to index.jsp without sending 404 error code first.

Currently if user loads anything except '/' or static pages described in wdc-servlet.xml server sends 404 error code and then shows '/' page. But if user loads '/page/home' - it's an invalid query, server shouldn't give 404 error code, it should just show index file. See error message in google chrome

Remove holder's responsibility for displaying titles

Add widget type declaration with widget description, published events and subscriped events lists

Create leaflet widget with require.config, loading css, modules and js

Для проверки загрузки стилей, скриптов и модулей ( с новыми директивами, которые будут использоваться для обработки html-шаблона виджета).
для самого простого примера:
http://tombatossals.github.io/angular-leaflet-directive/#!/examples/simple-map

Add simple variation of "bower.json" in widget packages such that widget dependencies are automatically downloaded.

Alternatives:

1. bower.json - then just unzipping archive doesn't work + requires re-running gulp
2. taking placing it locally in same dir -> dependency conflicts are possible
3. downloading through CDN - see previous point

Template structure & config

Should page template have a structure like widget? Should it have it's own controller? JSON settings?

Use /pagename instead of /page/pagename

Create widget directive

Define all domain classes and corresponding Hibernate mappings.

For metadata scheme.

Rename widget.name to widjet.type

Make up exceptions hierarchy for DDL(Data definition language)

Add widget subscription

Make home page constructed through the standard template/holder/widget system.

Make up reasonable interfaces for service classes

association, artefactmetadata and artefact_def NOT NULL constraints

Should we add NOT NULL constraints to id fields of association, artefactmetadata and artefact_def tables?

Upload archived widget on HTTP request, rebuild website.

Use the following wiki page for reference (WIP) https://github.com/sochka/wdc/wiki/Widgets

Add JSON schema for validation and documentation purposes

http://json-schema.org/

Add npm module and gulp task

Add non-visual component support

Adding components to all pages at once

How do we add components (like json config viewer at the bottom of the page) to all the pages at once? Withough this mechanism devs should modify all the page templates at once or use some global condition variables to display that part of the page.

Make left menu a widget

Assuming that's what we should do.

Should we place non-visual components in a separate directory from widgets?

Send "event" object as the first argument in subsriber callbacks.

Should include:

• publisher name
• signal name

Add ngStrictDi to angular.bootstrap

Test with both production and dev. versions.

Add widget instance names