Zeppelin-web Spring Cleaning

.gitignore

@@ -12,26 +12,30 @@ conf/keystore
 conf/truststore
 conf/interpreter.json
 
+# other generated files
+spark/dependency-reduced-pom.xml
+
 #webapp
 zeppelin-web/node_modules
 zeppelin-web/dist
 zeppelin-web/.tmp
 zeppelin-web/.sass-cache
 zeppelin-web/bower_components
-zeppelin-web/src
 **nbproject/
 **node/
 
-logs/
-run/
-metastore_db/
-*.log
-jobs/
-zan-repo/
-drivers/
-warehouse/
-notebook/
-local-repo/
+
+# project level
+/logs/
+/run/
+/metastore_db/
+/*.log
+/jobs/
+/zan-repo/
+/drivers/
+/warehouse/
+/notebook/
+/local-repo/
 
 **/sessions/
 **/data/

bin/common.sh

@@ -45,8 +45,8 @@ if [[ -z "$ZEPPELIN_PID_DIR" ]]; then
 fi
 
 if [[ -z "${ZEPPELIN_WAR}" ]]; then
-  if [[ -d "${ZEPPELIN_HOME}/zeppelin-web/src/main/webapp" ]]; then
-    export ZEPPELIN_WAR="${ZEPPELIN_HOME}/zeppelin-web/src/main/webapp"
+  if [[ -d "${ZEPPELIN_HOME}/zeppelin-web/dist" ]]; then
+    export ZEPPELIN_WAR="${ZEPPELIN_HOME}/zeppelin-web/dist"
   else
     export ZEPPELIN_WAR=$(find -L "${ZEPPELIN_HOME}" -name "zeppelin-web*.war")
   fi

zeppelin-server/src/main/java/org/apache/zeppelin/server/AppScriptServlet.java

@@ -41,7 +41,7 @@ public class AppScriptServlet extends DefaultServlet {
   private static Set<String> scriptPaths = new HashSet<String>(
     Arrays.asList(
       "/scripts/scripts.js",
-      "/scripts/app.js"
+      "/components/baseUrl/baseUrl.js"
     )
   );
 
@@ -77,14 +77,16 @@ protected void doGet(HttpServletRequest request, HttpServletResponse response)
       script.append(new String(buffer, 0, numRead, "UTF-8"));
     }
 
-    // Replace the string "function getPort(){...}" to return
-    // the proper value
-    int startIndex = script.indexOf("function getPort()");
-    int endIndex = script.indexOf("}", startIndex);
+    // Replace the getPort function to return the proper value
+    String startReplaceString = "/* @preserve AppScriptServlet - getPort */";
+    String endReplaceString = "/* @preserve AppScriptServlet - close */";
+
+    int startIndex = script.indexOf(startReplaceString);
+    int endIndex = script.indexOf(endReplaceString, startIndex);
 
     if (startIndex >= 0 && endIndex >= 0) {
-      String replaceString = "function getPort(){return " + websocketPort + "}";
-      script.replace(startIndex, endIndex + 1, replaceString);
+      String replaceString = "this.getPort=function(){return " + websocketPort + "};";
+      script.replace(startIndex, endIndex + endReplaceString.length(), replaceString);
     }
 
     response.getWriter().println(script.toString());

zeppelin-web/.jshintrc

@@ -12,9 +12,10 @@
   "newcap": true,
   "noarg": true,
   "quotmark": "single",
+  "shadow": "inner",
   "regexp": true,
   "undef": true,
-  "unused": true,
+  "unused": "vars",
   "strict": true,
   "trailing": true,
   "smarttabs": true,

zeppelin-web/CONTRIBUTING.md

@@ -0,0 +1,118 @@
+# Contributing to Zeppelin-Web
+
+## Technologies
+
+Zeppelin WebApplication is using **AngularJS** as main Framework, and **Grunt** and **Bower** as helpers.
+
+So you might want to get familiar with it. 
+[Here is a good start](http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/)
+(There is obviously plenty more ressources to learn)
+
+## Coding style
+
+* We follow mainly the [Google Javascript Guide](https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)
+* We use a 2 spaces indentation
+* We use single quotes
+
+But don't worry, JSHint will make you remember it for the most part.
+
+There is also a rule of **No JQuery except in directives**, If you want to include a library,
+please search for its **angularJS** directive first and if it doesn't exist, make one :)
+
+## Folder Structure & Code Organization
+
+* `src` folder: Contains the Source code for Zeppelin WebApplication
+* `dist` folder: Contains the compiled code after using **grunt build**
+
+### Src and Code Organization
+
+The `src` folder is organized as such:
+
+<pre>
+ src/
+ ├──  app/
+ │   ├──  name/
+ │   │    ├──  name.controller.js
+ |   |    ├──  name.html
+ |   |    ├──  subComponent1/
+ |   |    |    ├──  subComponent1.html
+ |   |    |    ├──  subComponent1.css
+ │   |    |    └──  subComponent1.controller.js
+ │   │    └──  name.css
+ │   └──  app.js
+ ├──  assets/
+ │   ├──  images/
+ │   └──  styles/
+ |        ├──  looknfeel/
+ │        └──  printMode.css
+ ├──  components/
+ │   ├──  component1/
+ |   |    ├──  component1.html
+ │   |    └──  component1.controller.js
+ │   └──  component2/
+ ├──  fonts/
+ |    ├──  *.{eot,svg,ttf,woff,otf}
+ │    └──  *.css
+ ├──  favico.ico
+ ├──  index.html
+ └──  404.html
+</pre>
+
+The code is now organized in a component type of architecture, where everything is logically grouped.
+
+#### File type name convention
+
+In order to understand what is contained inside the .js files without opening it, we use some name conventions:
+* .controller.js
+* .directive.js
+* .service.js
+
+### Component Architecture
+
+When we talk about Component architecture, we think about grouping files together in a logical way.
+
+A component can then be made of multiple files like `.html`, `.css` or any other file type mentioned above.
+
+Related components can be grouped as sub-component as long as they are used in that component only.
+
+
+#### App folder
+
+Contains the application `app.js` and page related components.
+* Home Page
+* Interpreter Page
+* Notebook Page
+etc...
+
+The only resctiction being that a component in the `app` folder is **not used anywhere else**
+
+#### Components folder
+
+The `components` folder is here to contains any reusable component (used more than once)
+
+### Fonts
+
+Fonts files and their css are mixed together in the `fonts` folder
+
+## Compiling and using dev mode
+
+As we do not use yeoman to generate controllers or other type of files with this new structure,
+we need to do some includes manually in `index.html` in order to use dev mode and compile correctly.
+
+* Non-bower `.js` files needs to be injected between the tag `<!-- build:js({.tmp,src}) scripts/scripts.js -->`
+* Css files needs to be injected between the tag `<!-- build:css(.tmp) styles/main.css -->`
+
+## Add plugins with Bower
+```
+bower install <plugin> --save
+```
+The file index.html will automatically update with the new bower_component
+
+<br/>
+
+**Example**: `./bower install angular-nvd3` 
+
+You should find that line in the index.html file
+```
+<script src="bower_components/angular-nvd3/dist/angular-nvd3.js"></script>
+````