#5 Added the ability to execute a mapreduce job

Makefile

@@ -21,8 +21,11 @@ clean:
 	@curl -s -XDELETE $(BUCKET_HOME)/keys/buckets.html
 	@curl -s -XDELETE $(BUCKET_HOME)/keys/bucket.html
 	@curl -s -XDELETE $(BUCKET_HOME)/keys/key.html
+	@curl -s -XDELETE $(BUCKET_HOME)/keys/mapred.html
 	@curl -s -XDELETE $(BUCKET_HOME)/keys/ngriakadmin.js
+	@curl -s -XDELETE $(BUCKET_HOME)/keys/ui-bootstrap-tpls-0.2.0.min.js
 	@curl -s -XDELETE $(BUCKET_HOME)/keys/settings.json
+	@curl -s -XDELETE $(BUCKET_HOME)/keys/mapred.json
 
 install: check
 	@curl -s -XPUT -H "Content-Type: text/html" --data-binary @src/index.html $(BUCKET_HOME)/keys/index.html
@@ -32,8 +35,11 @@ install: check
 	@curl -s -XPUT -H "Content-Type: text/html" --data-binary @src/buckets.html $(BUCKET_HOME)/keys/buckets.html
 	@curl -s -XPUT -H "Content-Type: text/html" --data-binary @src/bucket.html $(BUCKET_HOME)/keys/bucket.html
 	@curl -s -XPUT -H "Content-Type: text/html" --data-binary @src/key.html $(BUCKET_HOME)/keys/key.html
+	@curl -s -XPUT -H "Content-Type: text/html" --data-binary @src/mapred.html $(BUCKET_HOME)/keys/mapred.html
 	@curl -s -XPUT -H "Content-Type: text/javascript" --data-binary @src/ngriakadmin.js $(BUCKET_HOME)/keys/ngriakadmin.js
+	@curl -s -XPUT -H "Content-Type: text/javascript" --data-binary @src/ui-bootstrap-tpls-0.2.0.min.js $(BUCKET_HOME)/keys/ui-bootstrap-tpls-0.2.0.min.js
 	@curl -s -XPUT -H "Content-Type: application/json" --data-binary @src/settings.json $(BUCKET_HOME)/keys/settings.json
+	@curl -s -XPUT -H "Content-Type: application/json" --data-binary @src/mapred.json $(BUCKET_HOME)/keys/mapred.json
 	@echo NgRiakAdmin was installed. Open $(BUCKET_HOME_OLD)/index.html
 
 insecure: install

src/index.html

@@ -7,6 +7,7 @@
     <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
     <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
     <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
+    <script src="ui-bootstrap-tpls-0.2.0.min.js"></script>
     <script src="ngriakadmin.js"></script>
     <style>
         body {
@@ -23,6 +24,7 @@
                     <ul class="nav">
                         <li><a ng-href="#/riak">Riak</a></li>
                         <li><a ng-href="#/buckets">Buckets</a></li>
+                        <li><a ng-href="#/mapred">Map Reduce</a></li>
                     </ul>
                 </div>
                 <div class="navbar-collapse pull-right">

src/mapred.html

@@ -0,0 +1,45 @@
+<h1>MapReduce</h1>
+<form ng-submit="performMapReduce()">
+    <div class="control-group">
+        <label for="buckets">Buckets</label>
+        <div class="controls">
+            <input id="buckets" type="text" ng-model="job.inputs"/>
+        </div>
+    </div>
+    <h2>query</h2>
+    <div>
+        <tabs>
+            <pane ng-repeat="phase in job.query" heading="{{$index+1}}: {{getPhaseType(phase)}}">
+                <div class="control-group">
+                    <label for="language{{$index}}">Language</label>
+                    <div class="controls">
+                        <select id="language{{$index}}" ng-model="getPhase(phase).language" ng-options="l for l in ['javascript', 'erlang']">
+                        </select>
+                    </div>
+                </div>
+                <div class="control-group">
+                    <label for="source{{$index}}">source</label>
+                    <div class="controls">
+                        <textarea id="source{{$index}}" ng-model="getPhase(phase).source" rows="10" style="width: 90%"></textarea>
+                    </div>
+                </div>
+            </pane>
+        </tabs>
+    </div>
+    <div class="control-group">
+        <div class="controls">
+            <button type="submit" class="btn btn-primary">Execute</button>
+        </div>
+    </div>
+</form>
+<div modal="result" close="close()">
+    <div class="modal-header">
+        <h4>Map reduce job result</h4>
+    </div>
+    <div class="modal-body">
+        <p>{{result|json}}</p>
+    </div>
+    <div class="modal-footer">
+        <button class="btn" ng-click="result=''">Close</button>
+    </div>
+</div>

src/mapred.json

@@ -0,0 +1,17 @@
+{
+    "inputs": "ngriakadmin",
+    "query": [
+        {
+            "map": {
+                "language": "javascript",
+                "source": "function(riakObject) {\n\treturn [riakObject.key]\n}"
+            }
+        },
+        {
+            "reduce": {
+                "language": "javascript",
+                "source": "function(values) {\n\tvar r = []\n\tfor (var i = 0; i < values.length; i++) {\n\t\tvar v = values[i];\n\t\tif (v.match(/mapred.+\\.json/g)) {\n\t\t\tr.push(v);\n\t\t}\n\t}\n\treturn r\n}"
+            }
+        }
+    ]
+}

src/ngriakadmin.js

@@ -1,4 +1,4 @@
-var module = angular.module('riakadmin', []);
+var module = angular.module('riakadmin', ['ui.bootstrap']);
 module.config(function ($routeProvider) {
     $routeProvider.
         when('/', {controller: HomeCtrl, templateUrl: 'home.html'}).
@@ -7,6 +7,8 @@ module.config(function ($routeProvider) {
         when('/buckets', {controller: BucketsCtrl, templateUrl: 'buckets.html'}).
         when('/buckets/:bucket', {controller: BucketCtrl, templateUrl: 'bucket.html'}).
         when('/buckets/:bucket/keys/:key', {controller: KeyCtrl, templateUrl: 'key.html'}).
+        when('/mapred', {controller: MapRedCtrl, templateUrl: 'mapred.html'}).
+        when('/mapred/:job', {controller: MapRedCtrl, templateUrl: 'mapred.html'}).
         otherwise({redirectTo: '/'});
 });
 module.directive('quorum', function () {
@@ -118,3 +120,35 @@ function KeyCtrl($scope, $routeParams, $http) {
             $scope.data = data;
         });
 }
+
+function MapRedCtrl($scope, $routeParams, $http) {
+    $http({method: 'GET', url: "mapred" + ($routeParams.job ? "_" + $routeParams.job : "") + ".json"}).
+        success(function(data, status, headers, config) {
+            $scope.job = data;
+            $scope.selectedPhase = $scope.getPhase(data.query[0])
+        });
+    $scope.languages = [{name: "erlang"}, {name: "javascript"}];
+
+    $scope.getPhase = function(phase) {
+        if (phase.map) {
+            return phase.map;
+        }
+        else if (phase.reduce) {
+            return phase.reduce;
+        }
+    }
+    $scope.getPhaseType = function(phase) {
+        if (phase.map) {
+            return "Map";
+        }
+        else if (phase.reduce) {
+            return "Reduce";
+        }
+    }
+
+    $scope.performMapReduce = function() {
+        $http({method: 'POST', data: $scope.job, url:'/mapred'}).success(function(data, status, headers, config) {
+            $scope.result = data;
+        })
+    }
+}