Add basic KV REST html UI

Makefile

@@ -76,9 +76,6 @@ roach_lib: roach_proto
 sqlparser:
 	make -C $(SQL_PARSER)
 
-goget:
-	$(GO) get ./...
-
 test: auxiliary
 	$(GO) test $(GOFLAGS) -run $(TESTS) $(PKG) $(TESTFLAGS)
 

build/deploy/Dockerfile

@@ -7,6 +7,7 @@ ADD cockroach /cockroach/
 ADD cockroach.sh /cockroach/
 ADD test.sh /test/
 ADD resources /cockroach/resources/
+ADD static /cockroach/static/
 
 # Set working directory  so that relative paths
 # are resolved appropriately when passed as args.

build/deploy/mkimage.sh

@@ -22,5 +22,6 @@ docker run "cockroachdb/cockroach-dev" shell "export STATIC=1 && \
 tar -xvC .out/ -f .out/files.tar && rm -f .out/files.tar
 mv .out/cockroach .
 cp -r .out/resources ./resources
+cp -r .out/static ./static
 docker build -t cockroachdb/cockroach .
 docker run -v "${DIR}/.out":/test/.out cockroachdb/cockroach

build/devbase/Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:latest
+FROM golang:1.4.0
 
 MAINTAINER Tobias Schottdorf <[email protected]>
 

server/server.go

@@ -50,8 +50,9 @@ import (
 )
 
 var (
-	rpcAddr  = flag.String("rpc", ":0", "host:port to bind for RPC traffic; 0 to pick unused port")
-	httpAddr = flag.String("http", ":8080", "host:port to bind for HTTP traffic; 0 to pick unused port")
+	rpcAddr   = flag.String("rpc", ":0", "host:port to bind for RPC traffic; 0 to pick unused port")
+	httpAddr  = flag.String("http", ":8080", "host:port to bind for HTTP traffic; 0 to pick unused port")
+	staticDir = flag.String("staticdir", "./static/", "directory containing static files for UI")
 
 	certDir = flag.String("certs", "", "directory containing RSA key and x509 certs")
 
@@ -392,7 +393,7 @@ func (s *server) start(engines []engine.Engine, attrs, httpAddr string, selfBoot
 }
 
 func (s *server) initHTTP() {
-	// TODO(shawn) pretty "/" landing page
+	s.mux.Handle("/", http.FileServer(http.Dir(*staticDir)))
 
 	// Admin handlers.
 	s.admin.RegisterHandlers(s.mux)

static/css/main.css

@@ -0,0 +1,58 @@
+/**
+Copyright 2014 The Cockroach Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License. See the AUTHORS file
+for names of contributors.
+
+Author: Andrew Bonventre ([email protected])
+*/
+* {
+  margin: 0;
+  padding: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html,
+body {
+  height: 100%;
+}
+body {
+  background-color: #f1f2f3;
+  color: #333;
+  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+}
+.fullHeightContainer {
+  height: calc(100% - 50px); /* Keep in line with height of .appNav */
+}
+.appNav {
+  height: 50px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding: 10px 20px;
+}
+.appNav-link:link,
+.appNav-link:visited {
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #333;
+  display: inline-block;
+  margin-right: 20px;
+}
+.appNav-link.appNav-homeName {
+  font-weight: 800;
+  font-size: 22px;
+  text-transform: none;
+}

static/css/rest_explorer.css

@@ -0,0 +1,52 @@
+/**
+Copyright 2014 The Cockroach Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License. See the AUTHORS file
+for names of contributors.
+
+Author: Andrew Bonventre ([email protected])
+*/
+.restExplorer,
+.restExplorerControls,
+.restExplorerLog {
+  height: 100%;
+}
+.restExplorerControls,
+.restExplorerLog {
+  float: left;
+  padding: 10px 20px;
+  width: 50%;
+}
+.restExplorerControls {
+  background-color: #fff;
+}
+.restExplorerControls-control {
+  margin-bottom: 20px;
+}
+.restExplorerControls-control > h3 {
+  font-weight: normal;
+  text-transform: uppercase;
+  margin-bottom: 3px;
+}
+.restExplorerControls-control input {
+  font: inherit;
+}
+.restExplorerLog {
+  position: relative;
+  font-family: 'Source Code Pro', 'Courier New', Courier, monospace;
+}
+.restExplorerLog-clearButton {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}

static/index.html

@@ -0,0 +1,39 @@
+<!--
+Copyright 2014 The Cockroach Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License. See the AUTHORS file
+for names of contributors.
+
+Author: Andrew Bonventre ([email protected])
+-->
+<!doctype html>
+<html ng-app="cockroach">
+  <head>
+    <meta charset="utf-8">
+    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900|Source+Code+Pro' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="/css/rest_explorer.css"> <!-- TODO(andybons): @import-like behavior -->
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-route.min.js"></script>
+    <script src="/js/main.js"></script>
+    <script src="/js/controllers/rest_explorer.js"></script> <!-- TODO(andybons): goog.require-like behavior -->
+    <title>Cockroach</title>
+  </head>
+  <body>
+    <header class="appNav">
+      <a href="#/" class="appNav-link appNav-homeName">Cockroach</a>
+      <a href="#/rest-explorer" class="appNav-link">REST Explorer</a>
+    </header>
+    <div class="fullHeightContainer" ng-view></div>
+  </body>
+</html>

static/js/controllers/rest_explorer.js

@@ -0,0 +1,58 @@
+// Copyright 2014 The Cockroach Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+// implied. See the License for the specific language governing
+// permissions and limitations under the License. See the AUTHORS file
+// for names of contributors.
+//
+// Author: Andrew Bonventre ([email protected])
+
+var crApp = angular.module('cockroach');
+crApp.controller('RestExplorerCtrl', ['$scope', '$http',
+    function(scope, http) {
+  scope.responseLog = [];
+  scope.clearResponseLog = function(e) {
+    scope.responseLog = [];
+  };
+  scope.requestPending = false;
+  scope.handleClick = function(e) {
+    e.preventDefault();
+    var method = e.target.getAttribute('data-method');
+    var endpoint = e.target.getAttribute('data-endpoint');
+    var rangeMethod = endpoint == '/kv/rest/range';
+    if (rangeMethod) {
+      endpoint += '?start=' + encodeURIComponent(scope.kvRangeStart);
+      if (!!scope.kvRangeEnd) {
+        endpoint += '&end=' + encodeURIComponent(scope.kvRangeEnd);
+      }
+    } else if (!!scope.kvKey) {
+      endpoint += scope.kvKey;
+    }
+    var data = {};
+    if (!!scope.kvValue) {
+      data['value'] = scope.kvValue;
+    }
+    var req = {
+      method: method,
+      url: endpoint,
+      data: data,
+    };
+    var responseFn = function(data, status, headers, config) {
+      if (typeof data == 'object') {
+        data = JSON.stringify(data);
+      }
+      var response = data.length > 0 ? data : '(no response body)';
+      var msg = ['[', method, '] ', status, ' ', endpoint, ': ', response].join('');
+      scope.responseLog.push(msg);
+    };
+    http(req).success(responseFn).error(responseFn);
+  };  
+}]);

static/js/main.js

@@ -0,0 +1,26 @@
+// Copyright 2014 The Cockroach Authors.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+// implied. See the License for the specific language governing
+// permissions and limitations under the License. See the AUTHORS file
+// for names of contributors.
+//
+// Author: Andrew Bonventre ([email protected])
+
+var crApp = angular.module('cockroach', ['ngRoute']);
+crApp.config(['$routeProvider', function(routeProvider) {
+  routeProvider.when('/rest-explorer', {
+    controller:'RestExplorerCtrl',
+    templateUrl:'/templates/rest_explorer.html'
+  }).otherwise({
+    redirectTo:'/'
+  });
+}]);

static/templates/rest_explorer.html

@@ -0,0 +1,58 @@
+<!--
+Copyright 2014 The Cockroach Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+implied. See the License for the specific language governing
+permissions and limitations under the License. See the AUTHORS file
+for names of contributors.
+
+Author: Andrew Bonventre ([email protected])
+
+TODO(andybons): Add support for kv/rest/counter.
+-->
+<div class="restExplorer">
+  <div class="restExplorerControls">
+    <section class="restExplorerControls-control">
+      <h3>Put K/V Pair</h3>
+      <form>
+        <input type="text" ng-model="kvKey" ng-disabled="responsePending" placeholder="Key">
+        &rarr;
+        <input type="text" ng-model="kvValue" ng-disabled="responsePending" placeholder="Value">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Put" data-endpoint="/kv/rest/entry/" data-method="PUT">
+      </form>
+    </section>
+    <section class="restExplorerControls-control">
+      <h3>Get/Head/Delete K/V Pair</h3>
+      <form>
+        <input type="text" ng-model="kvKey" ng-disabled="responsePending" placeholder="Key">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Get" data-endpoint="/kv/rest/entry/" data-method="GET">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Head" data-endpoint="/kv/rest/entry/" data-method="HEAD">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Delete" data-endpoint="/kv/rest/entry/" data-method="DELETE">
+      </form>
+    </section>
+    <section class="restExplorerControls-control">
+      <h3>K/V Range</h3>
+      <form>
+        <input type="text" ng-model="kvRangeStart" ng-disabled="responsePending" placeholder="Start">
+        &rarr;
+        <input type="text" ng-model="kvRangeEnd" ng-disabled="responsePending" placeholder="End">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Get" data-endpoint="/kv/rest/range" data-method="GET">
+        <input type="button" ng-click="handleClick($event)" ng-disabled="responsePending" value="Delete" data-endpoint="/kv/rest/range" data-method="DELETE">
+      </form>
+    </section>
+  </div>
+  <div class="restExplorerLog">
+    <h3>Console</h3>
+    <input type="button" class="restExplorerLog-clearButton" value="Clear" ng-click="clearResponseLog($event)">
+    <div ng-repeat="log in responseLog track by $id($index)">{{log}}</div>
+  </div>
+</div>
+