Include lodash + Interpreter Web refactoring Part1: reducing code

zeppelin-web/bower.json

@@ -22,8 +22,9 @@
     "ng-sortable": "~1.1.9",
     "angular-elastic": "~2.4.2",
     "angular-elastic-input": "~2.0.1",
-    "angular-xeditable" : "0.1.8",
-    "highlightjs": "~8.4.0"
+    "angular-xeditable": "0.1.8",
+    "highlightjs": "~8.4.0",
+    "lodash": "~3.9.3"
   },
   "devDependencies": {
     "angular-mocks": "1.3.8",
@@ -35,19 +36,23 @@
   },
   "overrides": {
     "ace-builds": {
-        "main": ["src-noconflict/ace.js",
-                 "src-noconflict/mode-scala.js",
-                 "src-noconflict/mode-sql.js",
-                 "src-noconflict/mode-markdown.js",
-                 "src-noconflict/keybinding-emacs.js",
-                 "src-noconflict/ext-language_tools.js",
-                 "src-noconflict/theme-github.js"],
+      "main": [
+        "src-noconflict/ace.js",
+        "src-noconflict/mode-scala.js",
+        "src-noconflict/mode-sql.js",
+        "src-noconflict/mode-markdown.js",
+        "src-noconflict/keybinding-emacs.js",
+        "src-noconflict/ext-language_tools.js",
+        "src-noconflict/theme-github.js"
+      ],
       "version": "1.1.8",
       "name": "ace-builds"
     },
     "highlightjs": {
-        "main": ["highlight.pack.js",
-                 "styles/github.css"],
+      "main": [
+        "highlight.pack.js",
+        "styles/github.css"
+      ],
       "version": "8.4.0",
       "name": "highlightjs"
     }

zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html

@@ -0,0 +1,64 @@
+<div>
+  <div class="row">
+    <div class="col-md-12">
+      <div class="interpreterSettingAdd" ng-show="showAddNewSetting">
+        <hr />
+        <h4>Create new interpreter</h4>
+
+        <div class="form-group" style="width:200px">
+          <b>Name</b>
+          <input id="newInterpreterSettingName" input pu-elastic-input
+                 pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.name" />
+        </div>
+
+        <b>Interpreter</b>
+        <div class="form-group"
+             style="width:180px">
+          <select class="form-control input-sm" ng-model="newInterpreterSetting.group"
+                  ng-change="newInterpreterGroupChange()">
+            <option ng-repeat="(groupName, interpreterGroup) in availableInterpreters" value="{{groupName}}">{{groupName}}</option>
+          </select>
+        </div>
+
+        <b>Properties</b>
+        <table class="table table-striped properties">
+          <tr>
+            <th>name</th>
+            <th>value</th>
+            <th>description</th>
+            <th>action</th>
+          </tr>
+          <tr ng-repeat="(key, value) in newInterpreterSetting.properties">
+            <td>{{key}}</td>
+            <td><textarea msd-elastic ng-model="value.value"></textarea></td>
+            <td>{{value.description}}</td>
+            <td>
+              <div class="btn btn-default btn-sm fa fa-remove" ng-click="removeInterpreterProperty(key)">
+              </div>
+            </td>
+          </tr>
+
+          <tr>
+            <td>
+              <input pu-elastic-input pu-elastic-input-minwidth="180px"
+                     ng-model="newInterpreterSetting.propertyKey" />
+            </td>
+            <td><textarea msd-elastic ng-model="newInterpreterSetting.propertyValue"></textarea></td>
+            <td></td>
+            <td>
+              <div class="btn btn-default btn-sm fa fa-plus" ng-click="addNewInterpreterProperty()">
+              </div>
+            </td>
+          </tr>
+        </table>
+
+        <span class="btn btn-primary" ng-click="addNewInterpreterSetting()">
+          Save
+        </span>
+        <span class="btn btn-default" ng-click="showAddNewSetting=false">
+          Cancel
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

zeppelin-web/src/app/interpreter/interpreter.controller.js

@@ -1,4 +1,4 @@
-/* global confirm:false, alert:false */
+/* global confirm:false, alert:false, _:false */
 /* jshint loopfunc: true */
 /*
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,35 +24,13 @@
  */
 angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope, $route, $routeParams, $location, $rootScope,
                                                                          $http, baseUrlSrv) {
-
-  var remoteSettingToLocalSetting = function(settingId, setting) {
-    var property = {};
-    for (var key in setting.properties) {
-      property[key] = {
-        value : setting.properties[key]
-      };
-    }
-    return {
-      id : settingId,
-      name : setting.name,
-      group : setting.group,
-      option : angular.copy(setting.option),
-      properties : property,
-      interpreters : setting.interpreterGroup
-    };
-  };
-
+  var interpreterSettingsTmp = [];
+  
+  
   var getInterpreterSettings = function() {
     $http.get(baseUrlSrv.getRestApiBase()+'/interpreter/setting').
       success(function(data, status, headers, config) {
-        var interpreterSettings = [];
-        //console.log("getInterpreterSettings=%o", data);
-
-        for (var settingId in data.body) {
-          var setting = data.body[settingId];
-          interpreterSettings.push(remoteSettingToLocalSetting(setting.id, setting));
-        }
-        $scope.interpreterSettings = interpreterSettings;
+        $scope.interpreterSettings = data.body;
       }).
       error(function(data, status, headers, config) {
         console.log('Error %o %o', status, data.message);
@@ -62,39 +40,24 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   var getAvailableInterpreters = function() {
     $http.get(baseUrlSrv.getRestApiBase()+'/interpreter').
       success(function(data, status, headers, config) {
-        var groupedInfo = {};
-        var info;
-        for (var k in data.body) {
-          info = data.body[k];
-          if (!groupedInfo[info.group]) {
-            groupedInfo[info.group] = [];
-          }
-          groupedInfo[info.group].push({
-            name : info.name,
-            className : info.className,
-            properties : info.properties
-          });
-        }
-
-        $scope.availableInterpreters = groupedInfo;
-        //console.log("getAvailableInterpreters=%o", data);
+        $scope.availableInterpreters = data.body;
       }).
       error(function(data, status, headers, config) {
         console.log('Error %o %o', status, data.message);
       });
   };
+  
+  var emptyNewProperty = function(object) {
+    angular.extend(object, {propertyValue: '', propertyKey: ''});
+  };
+  
+  var removeTMPSettings = function(index) {
+    interpreterSettingsTmp.splice(index, 1);
+  };
 
   $scope.copyOriginInterpreterSettingProperties = function(settingId) {
-    $scope.interpreterSettingProperties = {};
-    for (var i=0; i < $scope.interpreterSettings.length; i++) {
-      var setting = $scope.interpreterSettings[i];
-      if(setting.id === settingId) {
-        angular.copy(setting.properties, $scope.interpreterSettingProperties);
-        angular.copy(setting.option, $scope.interpreterSettingOption);
-        break;
-      }
-    }
-    console.log('%o, %o', $scope.interpreterSettings[i], $scope.interpreterSettingProperties);
+    var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+    interpreterSettingsTmp[index] = angular.copy($scope.interpreterSettings[index]);
   };
 
   $scope.updateInterpreterSetting = function(settingId) {
@@ -102,37 +65,19 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
     if (!result) {
       return;
     }
-
-    $scope.addNewInterpreterProperty(settingId);
-
+    
+    var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+    
     var request = {
-      option : {
-        remote : true
-      },
-      properties : {},
+      option : angular.copy($scope.interpreterSettings[index].option),
+      properties : angular.copy($scope.interpreterSettings[index].properties),
     };
+    
 
-    for (var i=0; i < $scope.interpreterSettings.length; i++) {
-      var setting = $scope.interpreterSettings[i];
-      if(setting.id === settingId) {
-        request.option = angular.copy(setting.option);
-        for (var p in setting.properties) {
-          request.properties[p] = setting.properties[p].value;
-        }
-        break;
-      }
-    }
-
-    $http.put(baseUrlSrv.getRestApiBase()+'/interpreter/setting/'+settingId, request).
+    $http.put(baseUrlSrv.getRestApiBase() + '/interpreter/setting/' + settingId, request).
     success(function(data, status, headers, config) {
-      for (var i=0; i < $scope.interpreterSettings.length; i++) {
-        var setting = $scope.interpreterSettings[i];
-        if (setting.id === settingId) {
-          $scope.interpreterSettings.splice(i, 1);
-          $scope.interpreterSettings.splice(i, 0, remoteSettingToLocalSetting(settingId, data.body));
-          break;
-        }
-      }
+      $scope.interpreterSettings[index] = data.body;
+      removeTMPSettings(index);
     }).
     error(function(data, status, headers, config) {
       console.log('Error %o %o', status, data.message);
@@ -140,14 +85,11 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   $scope.resetInterpreterSetting = function(settingId){
-    for (var i=0; i<$scope.interpreterSettings.length; i++) {
-      var setting = $scope.interpreterSettings[i];
-      if (setting.id === settingId) {
-        angular.copy($scope.interpreterSettingProperties, setting.properties);
-        angular.copy($scope.interpreterSettingOption, setting.option);
-        break;
-      }
-    }
+    var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+
+    // Set the old settings back
+    $scope.interpreterSettings[index] = angular.copy(interpreterSettingsTmp[index]);
+    removeTMPSettings(index);
   };
 
   $scope.removeInterpreterSetting = function(settingId) {
@@ -157,15 +99,10 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
     }
 
     console.log('Delete setting %o', settingId);
-    $http.delete(baseUrlSrv.getRestApiBase()+'/interpreter/setting/'+settingId).
+    $http.delete(baseUrlSrv.getRestApiBase() + '/interpreter/setting/' + settingId).
       success(function(data, status, headers, config) {
-        for (var i=0; i < $scope.interpreterSettings.length; i++) {
-          var setting = $scope.interpreterSettings[i];
-          if (setting.id === settingId) {
-            $scope.interpreterSettings.splice(i, 1);
-            break;
-          }
-        }
+        var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+        $scope.interpreterSettings.splice(index, 1);
       }).
       error(function(data, status, headers, config) {
         console.log('Error %o %o', status, data.message);
@@ -173,18 +110,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
   };
 
   $scope.newInterpreterGroupChange = function() {
-    var property = {};
-    var intpGroupInfo = $scope.availableInterpreters[$scope.newInterpreterSetting.group];
-    for (var i=0; i<intpGroupInfo.length; i++) {
-      var intpInfo = intpGroupInfo[i];
-      for (var key in intpInfo.properties) {
-        property[key] = {
-          value : intpInfo.properties[key].defaultValue,
-          description : intpInfo.properties[key].description
-        };
-      }
-    }
-    $scope.newInterpreterSetting.properties = property;
+    $scope.newInterpreterSetting.properties = $scope.availableInterpreters[$scope.newInterpreterSetting.group].properties;
   };
 
   $scope.restartInterpreterSetting = function(settingId) {
@@ -193,16 +119,10 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       return;
     }
 
-    $http.put(baseUrlSrv.getRestApiBase()+'/interpreter/setting/restart/'+settingId).
+    $http.put(baseUrlSrv.getRestApiBase() + '/interpreter/setting/restart/' + settingId).
       success(function(data, status, headers, config) {
-        for (var i=0; i < $scope.interpreterSettings.length; i++) {
-          var setting = $scope.interpreterSettings[i];
-          if (setting.id === settingId) {
-            $scope.interpreterSettings.splice(i, 1);
-            $scope.interpreterSettings.splice(i, 0, remoteSettingToLocalSetting(settingId, data.body));
-            break;
-          }
-        }
+      var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+      $scope.interpreterSettings[index] = data.body;
       }).
       error(function(data, status, headers, config) {
         console.log('Error %o %o', status, data.message);
@@ -214,21 +134,16 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       alert('Please determine name and interpreter');
       return;
     }
-
-    for (var i=0; i<$scope.interpreterSettings.length; i++) {
-      var setting = $scope.interpreterSettings[i];
-      if (setting.name === $scope.newInterpreterSetting.name) {
-        alert('Name ' + setting.name + ' already exists');
-        return;
-      }
+    
+    if (_.findIndex($scope.interpreterSettings, { 'name': $scope.newInterpreterSetting.name }) >= 0) {
+      alert('Name ' + $scope.newInterpreterSetting.name + ' already exists');
+      return;
     }
 
-    $scope.addNewInterpreterProperty();
-
     var newSetting = {
       name : $scope.newInterpreterSetting.name,
       group : $scope.newInterpreterSetting.group,
-      option : angular.copy($scope.newInterpreterSetting.option),
+      option : $scope.newInterpreterSetting.option,
       properties : {}
     };
 
@@ -255,8 +170,7 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       option : { remote : true },
       properties : {}
     };
-    $scope.newInterpreterSetting.propertyValue = '';
-    $scope.newInterpreterSetting.propertyKey = '';
+    emptyNewProperty($scope.newInterpreterSetting);
   };
 
   $scope.removeInterpreterProperty = function(key, settingId) {
@@ -264,38 +178,27 @@ angular.module('zeppelinWebApp').controller('InterpreterCtrl', function($scope,
       delete $scope.newInterpreterSetting.properties[key];
     }
     else {
-      for (var i=0; i < $scope.interpreterSettings.length; i++) {
-        var setting = $scope.interpreterSettings[i];
-        if (setting.id === settingId) {
-          delete $scope.interpreterSettings[i].properties[key];
-          break;
-        }
-      }
+      var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+      delete $scope.interpreterSettings[index].properties[key];
     }
   };
 
   $scope.addNewInterpreterProperty = function(settingId) {
     if(settingId === undefined) {
+      // Add new property from create form
       if (!$scope.newInterpreterSetting.propertyKey || $scope.newInterpreterSetting.propertyKey === '') {
         return;
       }
-      $scope.newInterpreterSetting.properties[$scope.newInterpreterSetting.propertyKey] = { value : $scope.newInterpreterSetting.propertyValue};
-      $scope.newInterpreterSetting.propertyValue = '';
-      $scope.newInterpreterSetting.propertyKey = '';
+      $scope.newInterpreterSetting.properties[$scope.newInterpreterSetting.propertyKey] = $scope.newInterpreterSetting.propertyValue;
+      emptyNewProperty($scope.newInterpreterSetting);
     }
     else {
-      for (var i=0; i < $scope.interpreterSettings.length; i++) {
-        var setting = $scope.interpreterSettings[i];
-        if (setting.id === settingId){
-          if (!setting.propertyKey || setting.propertyKey === '') {
-            return;
-          }
-          setting.properties[setting.propertyKey] = { value : setting.propertyValue };
-          setting.propertyValue = '';
-          setting.propertyKey = '';
-          break;
-        }
-      }
+      // Add new property from create form 
+      var index = _.findIndex($scope.interpreterSettings, { 'id': settingId });
+      var setting = $scope.interpreterSettings[index];
+      
+      setting.properties[setting.propertyKey] = setting.propertyValue;
+      emptyNewProperty(setting);
     }
   };
 

zeppelin-web/src/app/interpreter/interpreter.html

@@ -31,83 +31,7 @@ limitations under the License.
       </div>
     </div>
   </div>
-  <div>
-    <div class="row">    
-      <div class="col-md-12">
-        <div class="interpreterSettingAdd"
-             ng-show="showAddNewSetting">
-          <hr />
-          <h4>Create new interpreter</h4>
-
-          <div class="form-group"
-               style="width:200px">
-            <b>Name</b>
-            <input id="newInterpreterSettingName"
-                   input pu-elastic-input
-                   pu-elastic-input-minwidth="180px"
-                   ng-model="newInterpreterSetting.name">
-            </input>
-          </div>
-
-          <b>Interpreter</b>
-          <div class="form-group"
-               style="width:180px">
-            <select class="form-control input-sm"
-                    ng-model="newInterpreterSetting.group"
-                    ng-change="newInterpreterGroupChange()">
-              <option ng-repeat="(groupName, interpreterGroup) in availableInterpreters" value="{{groupName}}">{{groupName}}</option>
-            </select>
-          </div>
-
-          <b>Properties</b>
-          <table class="table table-striped properties">
-            <tr>
-              <th>name</th>
-              <th>value</th>
-              <th>description</th>
-              <th>action</th>
-            </tr>
-            <tr ng-repeat="(key, value) in newInterpreterSetting.properties">
-              <td>{{key}}</td>
-              <td><textarea msd-elastic
-                            ng-model="value.value"></textarea></td>
-              <td>{{value.description}}</td>
-              <td>
-                <div class="btn btn-default btn-sm fa fa-remove"
-                     ng-click="removeInterpreterProperty(key)">
-                </div>
-              </td>
-            </tr>
-
-            <tr>
-              <td>
-                <input pu-elastic-input
-                       pu-elastic-input-minwidth="180px"
-                       ng-model="newInterpreterSetting.propertyKey"></input>
-              </td>
-              <td><textarea msd-elastic ng-model="newInterpreterSetting.propertyValue"></textarea></td>
-              <td>
-              </td>
-              <td>
-                <div class="btn btn-default btn-sm fa fa-plus"
-                     ng-click="addNewInterpreterProperty()">
-                </div>
-              </td>
-            </tr>
-          </table>
-
-          <span class="btn btn-primary"
-                ng-click="addNewInterpreterSetting()">
-            Save
-          </span>
-          <span class="btn btn-default"
-                ng-click="showAddNewSetting=false">
-            Cancel
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  <div ng-include src="'app/interpreter/interpreter-create/interpreter-create.html'"></div>
 </div>
 
 <div class="box width-full home"
@@ -117,7 +41,7 @@ limitations under the License.
       <div class="col-md-12">
         <h3 class="interpreter-title">{{setting.name}} 
           <small>
-            <span ng-repeat="interpreter in setting.interpreters"
+            <span ng-repeat="interpreter in setting.interpreterGroup"
                   title="{{interpreter.class}}">
               <span ng-show="!$first">, </span>
               %{{interpreter.name}}
@@ -151,8 +75,8 @@ limitations under the License.
           <tr ng-repeat="(key, value) in setting.properties">
             <td>{{key}}</td>
             <td>
-              <span editable-textarea="value.value" e-form="valueform" e-msd-elastic>
-                {{value.value | breakFilter}}
+              <span editable-textarea="setting.properties[key]" e-form="valueform" e-msd-elastic>
+                {{value | breakFilter}}
               </span>
             </td>
             <td ng-if="valueform.$visible">

zeppelin-web/src/index.html

@@ -98,6 +98,7 @@ limitations under the License.
     <script src="bower_components/angular-elastic-input/dist/angular-elastic-input.min.js"></script>
     <script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
     <script src="bower_components/highlightjs/highlight.pack.js"></script>
+    <script src="bower_components/lodash/lodash.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:js({.tmp,src}) scripts/scripts.js -->