From 41c900c9c475a5b48220a3362e6e2c51a3bae738 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Fri, 21 Apr 2017 10:52:44 -0500 Subject: [PATCH 01/45] Add WIP pared-down webui/console prototype --- glide.yaml | 2 + handler.go | 17 +++++++ webui/assets/main.css | 63 +++++++++++++++++++++++ webui/assets/main.js | 114 ++++++++++++++++++++++++++++++++++++++++++ webui/index.html | 51 +++++++++++++++++++ 5 files changed, 247 insertions(+) create mode 100644 webui/assets/main.css create mode 100644 webui/assets/main.js create mode 100644 webui/index.html diff --git a/glide.yaml b/glide.yaml index d4615b0ba..b70957c75 100644 --- a/glide.yaml +++ b/glide.yaml @@ -31,3 +31,5 @@ import: - package: github.com/spf13/viper - package: github.com/gorilla/mux version: ^1.3.0 +- name: github.com/rakyll/statik + version: 274df120e9065bdd08eb1120e0375e3dc1ae8465 diff --git a/handler.go b/handler.go index 0e25c3f2f..c8de9bfe4 100644 --- a/handler.go +++ b/handler.go @@ -1,3 +1,5 @@ +//go:generate statik -src=./webui + package pilosa import ( @@ -21,6 +23,9 @@ import ( "github.com/gorilla/mux" "github.com/pilosa/pilosa/internal" "github.com/pilosa/pilosa/pql" + + _ "github.com/pilosa/pilosa/statik" + "github.com/rakyll/statik/fs" ) // Handler represents an HTTP handler. @@ -56,6 +61,8 @@ func NewHandler() *Handler { func NewRouter(handler *Handler) *mux.Router { router := mux.NewRouter() + router.HandleFunc("/", handler.handleWebUI).Methods("GET") + router.HandleFunc("/assets/{file}", handler.handleWebUI).Methods("GET") router.HandleFunc("/db", handler.handleGetDBs).Methods("GET") router.HandleFunc("/db/{db}", handler.handleGetDB).Methods("GET") router.HandleFunc("/db/{db}", handler.handlePostDB).Methods("POST") @@ -102,6 +109,16 @@ func (h *Handler) ServeHTTP(w http.ResponseWriter, r *http.Request) { h.Router.ServeHTTP(w, r) } +func (h *Handler) handleWebUI(w http.ResponseWriter, r *http.Request) { + // If user is using curl, don't chuck HTML at them + if strings.HasPrefix(r.UserAgent(), "curl") { + http.Error(w, "Welcome. Pilosa is running. Visit https://www.pilosa.com/docs/ for more information or try the web console by visiting this URL in your browser.", http.StatusNotFound) + return + } + statikFS, _ := fs.New() + http.FileServer(statikFS).ServeHTTP(w, r) +} + // handleGetSchema handles GET /schema requests. func (h *Handler) handleGetSchema(w http.ResponseWriter, r *http.Request) { if err := json.NewEncoder(w).Encode(getSchemaResponse{ diff --git a/webui/assets/main.css b/webui/assets/main.css new file mode 100644 index 000000000..3db45d2f1 --- /dev/null +++ b/webui/assets/main.css @@ -0,0 +1,63 @@ +.output { + overflow: auto; + padding: 0 8px; +} + +.output .query { + font-family: monospace; +} + +.output .response { + font-family: monospace; +} + +.input-bar { + padding-right: 2em; + background-color: #eeeeee; +} + +.input-textarea { + font-family: monospace; + font-size: 14px; + background-color: #dddddd; + width: 100%; + border: 0; + outline: 0; + margin: 1em; +} + +body { + padding-top: 5rem; +} + +.controls { + padding: 1em; +} + +.output { + padding: 1em; +} + +.result { + background-color: #eeeeee; + padding: 1em; + margin-top: 1em; +} +.result > .tab-content > .tab-pane { + padding: 1em; +} + +.query { + background-color: #dddddd; + padding: 0.5em +} + +#exTab3 .nav-pills > li > a { + border-radius: 4px 4px 0 0 ; +} + +#exTab3 .tab-content { + color : white; + background-color: #428bca; + padding : 5px 15px; +} diff --git a/webui/assets/main.js b/webui/assets/main.js new file mode 100644 index 000000000..efd0542ed --- /dev/null +++ b/webui/assets/main.js @@ -0,0 +1,114 @@ +class REPL { + constructor(input, output) { + this.input = input + this.output = output + this.history = [] + this.history_index = 0 + this.history_buffer = '' + this.result_number = 0 + } + bind_events() { + const repl = this + const keys = { + ENTER: 13, + UP_ARROW: 38, + DOWN_ARROW: 40 + } + + this.input.addEventListener("keydown", (e) => { + if (e.keyCode == keys.UP_ARROW) { + e.preventDefault() + if (this.input.value.substring(0, this.input.selectionStart).indexOf('\n') == '-1') { + if (this.history_index == 0) { + return + } else { + if (this.history_index == this.history.length) { + this.history_buffer = this.input.value + } + this.history_index-- + this.input.value = this.history[this.history_index] + this.input.setSelectionRange(this.input.value.length, this.input.value.length) + } + } + } + if (e.keyCode == keys.DOWN_ARROW) { + e.preventDefault() + if (this.input.value.substring(this.input.selectionEnd, this.input.length).indexOf('\n') == '-1') { + if (this.history_index == this.history.length) { + return + } else { + this.history_index++ + if (this.history_index == this.history.length) { + this.input.value = this.history_buffer + } else { + this.input.value = this.history[this.history_index] + } + this.input.setSelectionRange(this.input.value.length, this.input.value.length) + } + } + } + if (e.keyCode == keys.ENTER && !e.shiftKey) { + e.preventDefault() + this.history_buffer = '' + this.history_index = this.history.length + this.history[this.history_index] = this.input.value + this.history_index++ + this.process_query(this.input.value) + this.input.value = "" + } + }) + } + + process_query(query) { + var xhr = new XMLHttpRequest(); + var dbname = 'foo'; // todo: get db name from dropdown menu + xhr.open('POST', '/db/' + dbname + '/query'); + xhr.setRequestHeader('Content-Type', 'application/text'); + + const repl = this + xhr.onload = function() { + repl.result_number++ +//const entry = document.createElement('p') + const result = ( + '
' + + '' + +'' + + '
' + + '
' + + '

' + + query + + '

' + + '

Response

' + + '

' + + xhr.responseText + + '

' + + '
' + + '
' + + '' + + '' + + '' + + '' + + '
Response code' + xhr.status + '
Response text' + xhr.responseText + '
Response URL' + xhr.responseURL + '
' + + '
' + + '
' + + '
') + // TODO: remove jquery + $(repl.output).prepend($(result)) + }; + xhr.send(query); + } +} + +function startup() { + const input = document.querySelector('.input-textarea') + const output = document.querySelector('.output') + repl = new REPL(input, output) + repl.bind_events() +} diff --git a/webui/index.html b/webui/index.html new file mode 100644 index 000000000..1fe4b9f68 --- /dev/null +++ b/webui/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + +
+
+
+ +
+ 1 + 2 +
+
+ +
+
+
+ + + + + + + + From 2163dc38290451df486b8b02bd480bcd894d8722 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Fri, 21 Apr 2017 10:53:31 -0500 Subject: [PATCH 02/45] .gitignore additions --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 5fe629f6a..4b571e192 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ default.etcd/ *.test vendor .protoc-gen-gofast +statik +.DS_Store From 1cdbca1a1eea6420fc9c67d62c3060fc26ceaea2 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Mon, 24 Apr 2017 11:22:28 -0500 Subject: [PATCH 03/45] Install statik in build process, fix glide.yaml --- Makefile | 12 +++++++++--- glide.yaml | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index 78c3e71f6..2c8fd4fa5 100644 --- a/Makefile +++ b/Makefile @@ -1,6 +1,7 @@ -.PHONY: glide vendor-update docker pilosa crossbuild install generate +.PHONY: glide vendor-update docker pilosa crossbuild install generate statik GLIDE := $(shell command -v glide 2>/dev/null) +STATIK := $(shell command -v statik 2>/dev/null) PROTOC := $(shell command -v protoc 2>/dev/null) VERSION := $(shell git describe --tags 2> /dev/null || echo unknown) IDENTIFIER := $(VERSION)-$(GOOS)-$(GOARCH) @@ -26,7 +27,7 @@ glide.lock: glide glide.yaml vendor-update: glide.lock -test: vendor +test: vendor generate go test $(shell cd $(GOPATH)/src/$(CLONE_URL); go list ./... | grep -v vendor) pilosa: vendor @@ -46,9 +47,14 @@ endif go build -o .protoc-gen-gofast ./vendor/github.com/gogo/protobuf/protoc-gen-gofast cp ./.protoc-gen-gofast $(GOPATH)/bin/protoc-gen-gofast -generate: .protoc-gen-gofast +generate: .protoc-gen-gofast statik go generate github.com/pilosa/pilosa/internal +statik: +ifndef STATIK + go install github.com/rakyll/statik +endif + docker: docker build -t "pilosa:$(VERSION)" \ --build-arg ldflags="-X main.Version=$(VERSION) -X main.BuildTime=$(BUILD_TIME)" . diff --git a/glide.yaml b/glide.yaml index b70957c75..c453a7cae 100644 --- a/glide.yaml +++ b/glide.yaml @@ -31,5 +31,5 @@ import: - package: github.com/spf13/viper - package: github.com/gorilla/mux version: ^1.3.0 -- name: github.com/rakyll/statik +- package: github.com/rakyll/statik version: 274df120e9065bdd08eb1120e0375e3dc1ae8465 From 3db8b02865385430b0efbfe1e438c94ba59084a4 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Mon, 24 Apr 2017 11:57:26 -0500 Subject: [PATCH 04/45] Track statik directory in git so it will build without first running `go generate` --- .gitignore | 1 - statik/.gitignore | 1 + statik/doc.go | 3 +++ 3 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 statik/.gitignore create mode 100644 statik/doc.go diff --git a/.gitignore b/.gitignore index 4b571e192..c924add8b 100644 --- a/.gitignore +++ b/.gitignore @@ -2,5 +2,4 @@ default.etcd/ *.test vendor .protoc-gen-gofast -statik .DS_Store diff --git a/statik/.gitignore b/statik/.gitignore new file mode 100644 index 000000000..514ee40a1 --- /dev/null +++ b/statik/.gitignore @@ -0,0 +1 @@ +statik.go diff --git a/statik/doc.go b/statik/doc.go new file mode 100644 index 000000000..85edd9e6f --- /dev/null +++ b/statik/doc.go @@ -0,0 +1,3 @@ +// Package statik contains static assets for the Web UI. `go generate` will +// produce statik.go, which is ignored by git. +package statik From 18f6d3cd152d0017ba9e218e2bf388e0d5bba8b4 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Mon, 24 Apr 2017 12:16:44 -0500 Subject: [PATCH 05/45] Separate `go generate` make targets, remove generate from test requirements --- Makefile | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/Makefile b/Makefile index 2c8fd4fa5..cd3add926 100644 --- a/Makefile +++ b/Makefile @@ -27,7 +27,7 @@ glide.lock: glide glide.yaml vendor-update: glide.lock -test: vendor generate +test: vendor go test $(shell cd $(GOPATH)/src/$(CLONE_URL); go list ./... | grep -v vendor) pilosa: vendor @@ -42,14 +42,19 @@ install: vendor .protoc-gen-gofast: vendor ifndef PROTOC - $(error "protoc is not available please install protoc from https://github.com/google/protobuf/releases") + $(error "protoc is not available. please install protoc from https://github.com/google/protobuf/releases") endif go build -o .protoc-gen-gofast ./vendor/github.com/gogo/protobuf/protoc-gen-gofast cp ./.protoc-gen-gofast $(GOPATH)/bin/protoc-gen-gofast -generate: .protoc-gen-gofast statik +generate-protoc: .protoc-gen-gofast go generate github.com/pilosa/pilosa/internal +generate-statik: statik + go generate github.com/pilosa/pilosa/handler + +generate: generate-protoc generate-statik + statik: ifndef STATIK go install github.com/rakyll/statik From 15378c02dab77fc6a816299e8ee51b528896970b Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Mon, 24 Apr 2017 12:36:13 -0500 Subject: [PATCH 06/45] Update statik version and add subdependency --- glide.yaml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/glide.yaml b/glide.yaml index c453a7cae..54cabbdb4 100644 --- a/glide.yaml +++ b/glide.yaml @@ -32,4 +32,6 @@ import: - package: github.com/gorilla/mux version: ^1.3.0 - package: github.com/rakyll/statik - version: 274df120e9065bdd08eb1120e0375e3dc1ae8465 + version: 89fe3459b5c829c32e89bdff9c43f18aad728f2f + subpackages: + - fs From 92ec0a0cb056ca4ffcbb15cd63f4bd36ac4551b1 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Mon, 24 Apr 2017 14:25:33 -0500 Subject: [PATCH 07/45] Update glide.lock --- glide.lock | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/glide.lock b/glide.lock index 7fffeca5e..561d9eeec 100644 --- a/glide.lock +++ b/glide.lock @@ -1,5 +1,5 @@ -hash: 743e8f978eb4ad8f80a2ab71b05caebbf50b6769b71aa457bc4f144fef8c6595 -updated: 2017-04-18T15:33:39.035615802-05:00 +hash: 5321aa381179f691f250e415abaf7776a9e701df4cf6216a1d8f2e9fa27e2b52 +updated: 2017-04-24T14:24:06.986585051-05:00 imports: - name: github.com/boltdb/bolt version: 4b1ebc1869ad66568b313d0dc410e2be72670dda @@ -52,6 +52,10 @@ imports: version: c37440a7cf42ac63b919c752ca73a85067e05992 - name: github.com/pelletier/go-toml version: 13d49d4606eb801b8f01ae542b4afc4c6ee3d84a +- name: github.com/rakyll/statik + version: 89fe3459b5c829c32e89bdff9c43f18aad728f2f + subpackages: + - fs - name: github.com/satori/go.uuid version: 879c5887cd475cd7864858769793b2ceb0d44feb - name: github.com/spf13/afero From 60c8ba238cc6f966d046317699a48e3c22e6f050 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Tue, 25 Apr 2017 08:57:15 -0500 Subject: [PATCH 08/45] Add new webui design from Joe --- webui/assets/chevron-down.png | Bin 0 -> 3655 bytes webui/assets/main.css | 63 --------- webui/assets/main.js | 114 --------------- webui/assets/nav_cluster.svg | 1 + webui/assets/nav_console.svg | 1 + webui/assets/nav_documentation.svg | 1 + webui/assets/nav_item1.svg | 1 + webui/assets/style.css | 220 +++++++++++++++++++++++++++++ webui/index.html | 209 +++++++++++++++++++++------ 9 files changed, 389 insertions(+), 221 deletions(-) create mode 100644 webui/assets/chevron-down.png delete mode 100644 webui/assets/main.css delete mode 100644 webui/assets/main.js create mode 100644 webui/assets/nav_cluster.svg create mode 100644 webui/assets/nav_console.svg create mode 100644 webui/assets/nav_documentation.svg create mode 100644 webui/assets/nav_item1.svg create mode 100644 webui/assets/style.css diff --git a/webui/assets/chevron-down.png b/webui/assets/chevron-down.png new file mode 100644 index 0000000000000000000000000000000000000000..3312489a21a768a90cb73633e3a596c792c6941b GIT binary patch literal 3655 zcmc&%=Q|q?*KW0H)Tmae-BOjBMU9A24O;c6Q8k0w8WKdQtwyLI8k;CJ(x67|hSaE^ z6|2;a74t_Bd(?V7f5ZFXJ=b;4{pDQub)OICzRrm;eEE!(nV0#}rAw^3&$Wy%u=9V( zc3m3+?#C;WRNBP}*6USt8_amab zi^h;Is}+fy%21M@F?ele)cv1>K-vLyLy5L`@9Kq!|BqORPvUBg^Evj<4W(8q|CaQ; zfj-@C?_4rA8i1G*|KyrqU(f8R^Y;SmXTWXiW6t^`_&;3P^h6t$^@M78kW@#OmD7~* zC|u%g=y$tpBOr`mX;U|C2HN(p8G3T+?HtrD=b=rO-Q^KNT;89bpZvm4NJT6n*|)zE zH*h}*TEI5K>wi;9jDw5H`ChB_6Kz{gxvT1FGSkfq$ldWr2)fE&S+}zI7)X454~Nql zKY5qjkSG-Qtt929%76^%4{Wn64~11!O!B&4PgslhUG77Id-+HeIFwAv7n(TISXbMx zdVKnKav*z6;sq;e$qEU5_eW*2GbM5U>)3%OTO7~>FbY`KVRjM&&J<=Ip{(WQR7OzS z?|W9K_o~tI7#Y!JN%SdYiFKL3bY3+>;*Pi9>FD@MORsP5W_E??c2kPLG?+TJFhplI zs3Ovd&Ew8Bw{4RZiYAWt06Pf)E762Mzj~W05~~yi;1_~R9M7=HHMKgyl%fydz&lVe?g%mrA+|nx`3FA$lpXH!a5g6%^eoR~m?XViC z4kuyyw4Dt4d@jaKezLBTVBHH2D9vM(fk;$V=}2^-98zh-+{&!v*cUk%8frW58Cj{m z_iB!cJY5w{ZZ4h0J5JeDZh<9bxf)`k3KKoHsU3^}?O5A^6skLl4oyL~-9D0TH$P94 z6fx2H;PAAY=k zvSjJ}ONWkOA+!KVgcnX$=~PPnOFUO&e_7XBb|;KSp+xv}N2kaAAW6 zqQfx%l0s?Wh(zxs?__TUp+8r$BBKD_)^7UEj{Ovc&P}-O`lczKYw?~MH$u?`GPyLl z&wqu7Ej=qK8Qc9&BgkwgpqWLP*g|jl!zqOYKNK9?mmB&vhR4isJg;+#i5pjI^9v@e zcT$5&6$6MZyM(5_Xjzu~)-Y*0XX@{p*yCo3m<H?JL2_HGoe|6nCZiLU5)Ec4Gpk}C9k02A?A{RX8b=e!nZ z#p&nW0#MIwJUzUfH4KNFW6z97F`Pt-8Q^3G5Lk=A#1mUHodWc zv)!LJdttEI$%n`=t{h%CFb#dp!_lQ_N1Y1&2VXAX&ByH&9j;w7ble)N1-$zf1c?D3ir>m1$TR*V;wUV(u z*xID@%^BW(z7p(Ohe@vp3x9VjCH@%!wYBYE_DX&fLnZn29dAmtWg}+QNl463V3^q0 z344g3hma4UY&!~DaA#4@{!eXT*k4c)1kXKg_-J(TT^Zk~5sC?d0(NA3KbbW}Ca4t; z*T;>~wdDlZL%CKwz3F**!YoLM=D7%vZ@_Z^iKSYX80ke zVh{|ve`k@m<_}nAWnf>1Nr5*lD7mf0X`vF4A)3K4(^6589-=pk?)MT{$uwX+{*UEX0E%$Wkise(G1v78Nj%2ChfV>T2SxAbjQcF@)!q7}MZSjU&SPTk-mRJ8wD zyKZ3j?1;gFobG@kzXW zdh(K+ekHT~=%#|{O2sYPn!$*2y~-r_I^!#DB;uki7l9x*wgB5w^d~1mc8^rr79f=P z9l-64^Ry?1ObR*0V)bUvcjkW0|m5CH9Ip${Ay_Bd$j)lW-=F*({6B$h}(qWM36| z@s@e0V$otv9TPr!=2Sg3Mq4H{x~ZGmc@935%hz$Aurh_tD&q3qUdlH?O646w;e!&O zY}`Vk{dNyb%#^S`HtC+`HmKRh>vbj>ysWF6ty_~s9>gKb@s&u7OiYzU4E@h+|Y~E#o^~cyP&no8D67>AS zYv}r=rB`M|S>GiSwPI^a)12Vi) zg~7jSVPreXjW*8EZTFv*5i@i3c=PuxWmrL~-}5c}A;Cm8QlK4*woup+lu+1&4)_!m zzC1BxD4v&Pl;@A(@~EDV9(rbLb+Lmb+%+V&>_aylKReZQX%R&2XI_ZGRH6X=ByOU` z$CJls!#IOcBCamO88I^7nAuYsPSz~!f%sO?LO4G#CH)qL&B*-dYI@GsWO*08*`g(J zD=eUu!WvX*=*uQf<(IB%2It+2CR%={xc=P=$ss0%o*qDRAB+peGK*?$nf?d+wZjFH zrwyv@u5|Eg)wkO7JFxd~48Q|=-e)}F@B%bOMRu4S)7O1A*LO*__9sFd)5z%a_?&>e zzgWjmg)7N-8Z-XoR50ARt~Qanb8xnj0>i!~E4|`T2ggQveuz8NE|`K#gb;YM6064F zPmElfSi)7WONW_dXkOlAGO9H%Uke&6*}#4W-uhNgvz}-dpBQ=n7OR*kz`X9hZQ=2K zYt%U}aB>EvO`Tj|RoIp&Ht2?5|1!Ht1n28rpMGPyM}*?#1KTM~B7uI^)h|P&Uq>`g zUgNxcX6>0_q2RraA%0A5Z1_B?Nu49xZCPFhhzEHbR6xIH+ajvm*0_0{eT!PU*auaX zzC6q|2S)ymaDuP5S8Uwf{Y*V-p!4Q4q;p9`;8$%O@7J^co#Xr4!<)9MkO~H{t&UCNKlt literal 0 HcmV?d00001 diff --git a/webui/assets/main.css b/webui/assets/main.css deleted file mode 100644 index 3db45d2f1..000000000 --- a/webui/assets/main.css +++ /dev/null @@ -1,63 +0,0 @@ -.output { - overflow: auto; - padding: 0 8px; -} - -.output .query { - font-family: monospace; -} - -.output .response { - font-family: monospace; -} - -.input-bar { - padding-right: 2em; - background-color: #eeeeee; -} - -.input-textarea { - font-family: monospace; - font-size: 14px; - background-color: #dddddd; - width: 100%; - border: 0; - outline: 0; - margin: 1em; -} - -body { - padding-top: 5rem; -} - -.controls { - padding: 1em; -} - -.output { - padding: 1em; -} - -.result { - background-color: #eeeeee; - padding: 1em; - margin-top: 1em; -} -.result > .tab-content > .tab-pane { - padding: 1em; -} - -.query { - background-color: #dddddd; - padding: 0.5em -} - -#exTab3 .nav-pills > li > a { - border-radius: 4px 4px 0 0 ; -} - -#exTab3 .tab-content { - color : white; - background-color: #428bca; - padding : 5px 15px; -} diff --git a/webui/assets/main.js b/webui/assets/main.js deleted file mode 100644 index efd0542ed..000000000 --- a/webui/assets/main.js +++ /dev/null @@ -1,114 +0,0 @@ -class REPL { - constructor(input, output) { - this.input = input - this.output = output - this.history = [] - this.history_index = 0 - this.history_buffer = '' - this.result_number = 0 - } - bind_events() { - const repl = this - const keys = { - ENTER: 13, - UP_ARROW: 38, - DOWN_ARROW: 40 - } - - this.input.addEventListener("keydown", (e) => { - if (e.keyCode == keys.UP_ARROW) { - e.preventDefault() - if (this.input.value.substring(0, this.input.selectionStart).indexOf('\n') == '-1') { - if (this.history_index == 0) { - return - } else { - if (this.history_index == this.history.length) { - this.history_buffer = this.input.value - } - this.history_index-- - this.input.value = this.history[this.history_index] - this.input.setSelectionRange(this.input.value.length, this.input.value.length) - } - } - } - if (e.keyCode == keys.DOWN_ARROW) { - e.preventDefault() - if (this.input.value.substring(this.input.selectionEnd, this.input.length).indexOf('\n') == '-1') { - if (this.history_index == this.history.length) { - return - } else { - this.history_index++ - if (this.history_index == this.history.length) { - this.input.value = this.history_buffer - } else { - this.input.value = this.history[this.history_index] - } - this.input.setSelectionRange(this.input.value.length, this.input.value.length) - } - } - } - if (e.keyCode == keys.ENTER && !e.shiftKey) { - e.preventDefault() - this.history_buffer = '' - this.history_index = this.history.length - this.history[this.history_index] = this.input.value - this.history_index++ - this.process_query(this.input.value) - this.input.value = "" - } - }) - } - - process_query(query) { - var xhr = new XMLHttpRequest(); - var dbname = 'foo'; // todo: get db name from dropdown menu - xhr.open('POST', '/db/' + dbname + '/query'); - xhr.setRequestHeader('Content-Type', 'application/text'); - - const repl = this - xhr.onload = function() { - repl.result_number++ -//const entry = document.createElement('p') - const result = ( - '
' + - '
    ' + - '
  • ' + - 'Result' + - '
    • ' + - '
  • ' + - 'Raw' + - '
    • ' + - '
' + -'' + - '
' + - '
' + - '

' + - query + - '

' + - '

Response

' + - '

' + - xhr.responseText + - '

' + - '
' + - '
' + - '' + - '' + - '' + - '' + - '
Response code' + xhr.status + '
Response text' + xhr.responseText + '
Response URL' + xhr.responseURL + '
' + - '
' + - '
' + - '
') - // TODO: remove jquery - $(repl.output).prepend($(result)) - }; - xhr.send(query); - } -} - -function startup() { - const input = document.querySelector('.input-textarea') - const output = document.querySelector('.output') - repl = new REPL(input, output) - repl.bind_events() -} diff --git a/webui/assets/nav_cluster.svg b/webui/assets/nav_cluster.svg new file mode 100644 index 000000000..baf6310ea --- /dev/null +++ b/webui/assets/nav_cluster.svg @@ -0,0 +1 @@ +nav_cluster_1 \ No newline at end of file diff --git a/webui/assets/nav_console.svg b/webui/assets/nav_console.svg new file mode 100644 index 000000000..2263c2a69 --- /dev/null +++ b/webui/assets/nav_console.svg @@ -0,0 +1 @@ +nav_console \ No newline at end of file diff --git a/webui/assets/nav_documentation.svg b/webui/assets/nav_documentation.svg new file mode 100644 index 000000000..12cd2108c --- /dev/null +++ b/webui/assets/nav_documentation.svg @@ -0,0 +1 @@ +documentation \ No newline at end of file diff --git a/webui/assets/nav_item1.svg b/webui/assets/nav_item1.svg new file mode 100644 index 000000000..d6d7f779e --- /dev/null +++ b/webui/assets/nav_item1.svg @@ -0,0 +1 @@ +nav_item1 \ No newline at end of file diff --git a/webui/assets/style.css b/webui/assets/style.css new file mode 100644 index 000000000..940d6657f --- /dev/null +++ b/webui/assets/style.css @@ -0,0 +1,220 @@ +*{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +body{ + font-family: sans-serif; + background-color: #fbfcfd; + margin: 0; + color: #102445; +} +h2{ + margin-bottom: 30px; +} + +h5{ + text-transform: uppercase; + letter-spacing: 2px; + line-height: 1.21; + margin: 0; +} +a{ + line-height: 1.38; + letter-spacing: 0.2px; + text-decoration: none; + color: #102445; +} + + +a:hover{ + color: #1db598; +} + +textarea{ + width: 100%; + margin-bottom: 10px; + border-radius: 2px; + background-color: #fbfcfd; + border: solid 1.5px #e4eff4; + font-family: monospace; + font-size: 16px; + line-height: 1.5; + letter-spacing: 1.1px; + outline: none; + padding: 30px; +} + + +select{ + /*-webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: url("img/chevron-down.png") no-repeat calc(100% - 10px) !important;*/ + border-radius: 3px; + background-color: #fbfcfd; + width: 187px; + height: 50px; + border: solid 1.5px #e4eff4; + font-size: 18px; + font-weight: bold; + line-height: 1.39; + letter-spacing: 0.2px; + color: #102445; + padding: 10.5px; + +} + +button{ + width: 165px; + height: 50px; + border-radius: 3px; + background-color: #1db598; + outline: none; + border: none; + font-size: 16px; + color: white; +} + +em{ + font-style: normal; + opacity: 0.5; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.2px; + color: #102445; +} + +.header{ + height: 92px; + display: flex; + align-items: center; + justify-content: space-between; + width: 90%; + margin: auto; +} + +.container{ + display: flex; + height:100%; + min-height: 100vh; +} +.nav{ + color: white; + display: flex; + flex-direction: column; + width: 150px; + background: #3c5f8d; +} + +.nav-item{ + height:150px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + border-bottom: 3px solid #2a4871; + cursor: pointer; +} + +.nav-active{ + background: #f2f7f9; + font-weight: bold; + color: #1db598; +} + + + +.interface{ + display: flex; + flex: 1; + flex-direction: column; + align-items: center; + background: #f2f7f9; +} + +.query{ + margin-bottom: 30px; +} +.query, +.output-container{ + width: 75%; +} + +.output{ + margin-bottom: 30px; +} + +.input-controls{ + display: flex; + justify-content: flex-end; +} + +.tabs{ + display: flex; + background: #eaf2f6; +} +.active-tab{ + background: white; + font-weight: bold; + color: #1db598; + +} + +.tab{ + height:60px; + width: 100px; + border-top-right-radius: 5px; + display: flex; + align-items: center; + justify-content: center; + visibility: visible; + cursor: pointer; + +} + +.pane{ + background: white; + padding: 30px; + display: none; +} + +.active{ + display: block; +} + + + +.result-io-header{ + display: flex; + align-items: center; + margin-bottom: 15px; +} + +.result-input, +.result-ouput{ + border-radius: 2px; + background-color: #fafafa; + border: solid 1.5px #e4eff4; + font-family: monospace; + font-size: 16px; + line-height: 1.5; + letter-spacing: 1.1px; + color: #102445; + padding: 15px; + margin-bottom: 15px; +} + + +.result-ouput{ + background-color: #edf9f7; + border-left: solid 4px #1db598; +} + + +.raw{ + height: 253px; + display: flex; + align-items: center; + justify-content: center; +} diff --git a/webui/index.html b/webui/index.html index 1fe4b9f68..a14d202bf 100644 --- a/webui/index.html +++ b/webui/index.html @@ -1,51 +1,172 @@ - - - - - - - - -
-
-
- -
- 1 - 2 -
-
- +
+ + Cluster Admin +
+
+ + Documentation
-
+
- - - - - - +
+

Query

+ +
+ + +     + +
+
+ + +
+ +

Output

+
+ + +
+ +
+ + + +
+ +
+ + + From a0e496f6a0301e45f40ba9bd907c61aa0703bcf6 Mon Sep 17 00:00:00 2001 From: Cody Soyland Date: Tue, 25 Apr 2017 09:40:17 -0500 Subject: [PATCH 09/45] Update JS to hit Pilosa --- webui/assets/main.js | 129 +++++++++++++++++++++++++++++++++++++++++++ webui/index.html | 110 +----------------------------------- 2 files changed, 130 insertions(+), 109 deletions(-) create mode 100644 webui/assets/main.js diff --git a/webui/assets/main.js b/webui/assets/main.js new file mode 100644 index 000000000..b24d3ac51 --- /dev/null +++ b/webui/assets/main.js @@ -0,0 +1,129 @@ +class REPL { + constructor(input, output, button) { + this.input = input + this.output = output + this.button = button + this.history = [] + this.history_index = 0 + this.history_buffer = '' + this.result_number = 0 + } + bind_events() { + const repl = this + const keys = { + ENTER: 13, + UP_ARROW: 38, + DOWN_ARROW: 40 + } + + this.input.addEventListener("keydown", (e) => { + if (e.keyCode == keys.UP_ARROW) { + e.preventDefault() + if (this.input.value.substring(0, this.input.selectionStart).indexOf('\n') == '-1') { + if (this.history_index == 0) { + return + } else { + if (this.history_index == this.history.length) { + this.history_buffer = this.input.value + } + this.history_index-- + this.input.value = this.history[this.history_index] + this.input.setSelectionRange(this.input.value.length, this.input.value.length) + } + } + } + if (e.keyCode == keys.DOWN_ARROW) { + e.preventDefault() + if (this.input.value.substring(this.input.selectionEnd, this.input.length).indexOf('\n') == '-1') { + if (this.history_index == this.history.length) { + return + } else { + this.history_index++ + if (this.history_index == this.history.length) { + this.input.value = this.history_buffer + } else { + this.input.value = this.history[this.history_index] + } + this.input.setSelectionRange(this.input.value.length, this.input.value.length) + } + } + } + if (e.keyCode == keys.ENTER && !e.shiftKey) { + e.preventDefault() + this.submit(); + } + }) + this.button.onclick = function() { + repl.submit(); + }; + } + + submit() { + this.history_buffer = '' + this.history_index = this.history.length + this.history[this.history_index] = this.input.value + this.history_index++ + this.process_query(this.input.value) + this.input.value = "" + } + + process_query(query) { + var xhr = new XMLHttpRequest(); + var dbname = 'foo'; // todo: get db name from dropdown menu + xhr.open('POST', '/db/' + dbname + '/query'); + xhr.setRequestHeader('Content-Type', 'application/text'); + + const repl = this + xhr.onload = function() { + repl.result_number++ + repl.createSingleOutput({"input": query, "output": xhr.responseText}) + } + xhr.send(query) + } + + createSingleOutput(res) { + var node = document.createElement("div"); + node.classList.add('output'); + var markup =` +
+
+
+
+
Input
+        + Source: Index +
+
+ ${res.input} +
+
+
+
+
output
+        + .42 ms +
+
+ ${res.output} +
+
+
+
+
+ + Export raw .csv +
+
+
+ ` + node.innerHTML = markup; + this.output.insertBefore(node, this.output.firstChild) + } +} + +const input = document.getElementById('query') +const output = document.getElementById('outputs') +const button = document.getElementById('query-btn') + +repl = new REPL(input, output, button) +repl.bind_events() diff --git a/webui/index.html b/webui/index.html index a14d202bf..607c55167 100644 --- a/webui/index.html +++ b/webui/index.html @@ -59,114 +59,6 @@ - + From 7ee65e602211cd878d6872ba96258e834628427e Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 11:46:17 -0500 Subject: [PATCH 10/45] Populate dropdown from /schema, use selected index for queries --- webui/assets/main.js | 32 ++++++++++++++++++++++++++++---- webui/index.html | 4 ++-- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index b24d3ac51..6ee89ffc4 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -69,14 +69,19 @@ class REPL { process_query(query) { var xhr = new XMLHttpRequest(); - var dbname = 'foo'; // todo: get db name from dropdown menu - xhr.open('POST', '/db/' + dbname + '/query'); + var e = document.getElementById("index-dropdown"); + var indexname = e.options[e.selectedIndex].text; + xhr.open('POST', '/db/' + indexname + '/query'); // TODO db->index xhr.setRequestHeader('Content-Type', 'application/text'); const repl = this xhr.onload = function() { repl.result_number++ - repl.createSingleOutput({"input": query, "output": xhr.responseText}) + repl.createSingleOutput({ + "input": query, + "output": xhr.responseText, + "indexname": indexname, + }) } xhr.send(query) } @@ -91,7 +96,7 @@ class REPL {
Input
       - Source: Index + Source: ${res.indexname}
${res.input} @@ -119,11 +124,30 @@ class REPL { node.innerHTML = markup; this.output.insertBefore(node, this.output.firstChild) } + + populate_index_dropdown() { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '/schema') + var select = document.getElementById('index-dropdown') + + xhr.onload = function() { + var schema = JSON.parse(xhr.responseText) + for(var i=0; iindex + var opt = document.createElement('option') + opt.innerHTML = schema['dbs'][i]['name'] + select.appendChild(opt) + } + } + xhr.send(null) + } + } + const input = document.getElementById('query') const output = document.getElementById('outputs') const button = document.getElementById('query-btn') repl = new REPL(input, output, button) +repl.populate_index_dropdown() repl.bind_events() diff --git a/webui/index.html b/webui/index.html index 607c55167..36030af61 100644 --- a/webui/index.html +++ b/webui/index.html @@ -34,8 +34,8 @@
-     From cd30b412f8d5113a9371cfb12dda82779758bd59 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 11:59:49 -0500 Subject: [PATCH 11/45] Add real query time to output --- webui/assets/main.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 6ee89ffc4..bf16cb2df 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -75,15 +75,19 @@ class REPL { xhr.setRequestHeader('Content-Type', 'application/text'); const repl = this + var start_time = new Date().getTime(); + xhr.send(query) xhr.onload = function() { + var end_time = new Date().getTime() repl.result_number++ repl.createSingleOutput({ "input": query, "output": xhr.responseText, "indexname": indexname, + "querytime_ms": end_time - start_time, }) } - xhr.send(query) + } createSingleOutput(res) { @@ -106,7 +110,7 @@ class REPL {
output
       - .42 ms + ${res.querytime_ms} ms
${res.output} From fe6d2189a708317ab179eca533e6e1ed5126086c Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 12:10:27 -0500 Subject: [PATCH 12/45] Change output background to red on error --- webui/assets/main.js | 7 ++++++- webui/assets/style.css | 10 ++++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index bf16cb2df..a91391a38 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -93,6 +93,11 @@ class REPL { createSingleOutput(res) { var node = document.createElement("div"); node.classList.add('output'); + var result_class = "result-output" + var output = JSON.parse(res['output']) + if("error" in output) { + result_class = "result-error" + } var markup =`
@@ -112,7 +117,7 @@ class REPL {        ${res.querytime_ms} ms
-
+
${res.output}
diff --git a/webui/assets/style.css b/webui/assets/style.css index 940d6657f..a4ed3df1f 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -192,7 +192,8 @@ em{ } .result-input, -.result-ouput{ +.result-output, +.result-error{ border-radius: 2px; background-color: #fafafa; border: solid 1.5px #e4eff4; @@ -206,11 +207,16 @@ em{ } -.result-ouput{ +.result-output{ background-color: #edf9f7; border-left: solid 4px #1db598; } +.result-error{ + background-color: #f9edf4; + border-left: solid 4px #b51d78; +} + .raw{ height: 253px; From 56797833efd646469204fb72ea93854ddd3438a1 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 12:10:41 -0500 Subject: [PATCH 13/45] Add TODO comment --- webui/assets/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index a91391a38..d27978921 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -136,7 +136,7 @@ class REPL { populate_index_dropdown() { var xhr = new XMLHttpRequest(); - xhr.open('GET', '/schema') + xhr.open('GET', '/schema') // TODO schema->status (?) var select = document.getElementById('index-dropdown') xhr.onload = function() { From a899dbb2d5923e5e2bbb92ed80be46707cdf8663 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 12:11:04 -0500 Subject: [PATCH 14/45] Add favicon from cloudfront --- webui/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/webui/index.html b/webui/index.html index 36030af61..eda59baa0 100644 --- a/webui/index.html +++ b/webui/index.html @@ -6,6 +6,7 @@ Pilosa Console +
From 29127362042032a0920fa038a1973acdd711ae0c Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:17:11 -0500 Subject: [PATCH 15/45] Change red error color to match style --- webui/assets/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/webui/assets/style.css b/webui/assets/style.css index a4ed3df1f..68240ad32 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -213,8 +213,9 @@ em{ } .result-error{ - background-color: #f9edf4; - border-left: solid 4px #b51d78; + background-color: #fbf1f0; + border-left: solid 4px #fa3035; + color: #fa3035; } From 79031316f7a871f9a4b7dbe91463f78fc7f7a1c4 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:17:39 -0500 Subject: [PATCH 16/45] Remove dropdown label and add header --- webui/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webui/index.html b/webui/index.html index eda59baa0..c8c8aa2a1 100644 --- a/webui/index.html +++ b/webui/index.html @@ -16,7 +16,7 @@
- + Console
@@ -35,8 +35,8 @@
- Index:     From 67d0180b8b39c37c56eb1a2b51487873349ca9c6 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:18:34 -0500 Subject: [PATCH 17/45] Set default index selection to a valid one --- webui/assets/main.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/webui/assets/main.js b/webui/assets/main.js index d27978921..a92ba8830 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -143,9 +143,14 @@ class REPL { var schema = JSON.parse(xhr.responseText) for(var i=0; iindex var opt = document.createElement('option') + opt.value = i+1 opt.innerHTML = schema['dbs'][i]['name'] select.appendChild(opt) } + // set the active option to one of the populated options, instead of invalid "Index" + if(i > 0) { + select.value = 1; + } } xhr.send(null) } From e68e006dcad03fc872a9c51cdda8e30733c03ee0 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:23:19 -0500 Subject: [PATCH 18/45] Replace "database not found" error response with helpful message This is kludgy, we may change the way the message is displayed, or replace other raw error responses, we can revisit later. --- webui/assets/main.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index a92ba8830..41efd6df2 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -93,11 +93,22 @@ class REPL { createSingleOutput(res) { var node = document.createElement("div"); node.classList.add('output'); + var output_string = res['output'] + var output_json = JSON.parse(output_string) var result_class = "result-output" - var output = JSON.parse(res['output']) - if("error" in output) { + + if("error" in output_json) { result_class = "result-error" + if(output_json['error'] == 'database not found') { // TODO db->index + output_string = `Error: index not found
+ $ curl -XPOST "http://127.0.0.1:10101/db/test" -d '{"options": {"columnLabel": "col"}}' # create a database
+ $ curl -XPOST "http://127.0.0.1:10101/db/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create a frame
+ SetBit(row=0, col=0, frame=foo) # Use PQL to set a bit + ` + } } + + var markup =`
@@ -118,7 +129,7 @@ class REPL { ${res.querytime_ms} ms
- ${res.output} + ${output_string}
From 1326fe120c3006a85b2a06eee1b36b7ff9ccaf0e Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:31:43 -0500 Subject: [PATCH 19/45] Make error message more readable --- webui/assets/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webui/assets/main.js b/webui/assets/main.js index 41efd6df2..7532075ce 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -101,6 +101,8 @@ class REPL { result_class = "result-error" if(output_json['error'] == 'database not found') { // TODO db->index output_string = `Error: index not found
+
+ Just getting started? Try this:
$ curl -XPOST "http://127.0.0.1:10101/db/test" -d '{"options": {"columnLabel": "col"}}' # create a database
$ curl -XPOST "http://127.0.0.1:10101/db/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create a frame
SetBit(row=0, col=0, frame=foo) # Use PQL to set a bit From f72a0a1b09db95044f57b8b8f1d4b5d6d5c99850 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 13:40:14 -0500 Subject: [PATCH 20/45] Update error message and use it for 'frame not found' as well --- webui/assets/main.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 7532075ce..dde813a40 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -96,15 +96,20 @@ class REPL { var output_string = res['output'] var output_json = JSON.parse(output_string) var result_class = "result-output" + var getting_started_errors = [ + 'database not found', // TODO db->index + 'frame not found', + ] if("error" in output_json) { result_class = "result-error" - if(output_json['error'] == 'database not found') { // TODO db->index - output_string = `Error: index not found
+ if(getting_started_errors.indexOf(output_json['error']) >= 0) { + output_string += `

Just getting started? Try this:
- $ curl -XPOST "http://127.0.0.1:10101/db/test" -d '{"options": {"columnLabel": "col"}}' # create a database
- $ curl -XPOST "http://127.0.0.1:10101/db/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create a frame
+ $ curl -XPOST "http://127.0.0.1:10101/db/test" -d '{"options": {"columnLabel": "col"}}' # create index "test"
+ $ curl -XPOST "http://127.0.0.1:10101/db/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create frame "foo"
+ # Select "test" in the index dropdown above
SetBit(row=0, col=0, frame=foo) # Use PQL to set a bit ` } From 55f4ae79c08be6fc3a0bb666064f846acb5023a4 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 14:55:22 -0500 Subject: [PATCH 21/45] Make nav buttons work --- webui/assets/main.js | 40 +++++++++++++++++++ webui/assets/nav-cluster-active.svg | 1 + .../{nav_cluster.svg => nav-cluster.svg} | 0 ...nav_console.svg => nav-console-active.svg} | 0 webui/assets/nav-console.svg | 1 + webui/assets/nav-documentation-active.svg | 1 + ...ocumentation.svg => nav-documentation.svg} | 0 webui/assets/style.css | 15 ++++++- webui/index.html | 28 ++++++++----- 9 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 webui/assets/nav-cluster-active.svg rename webui/assets/{nav_cluster.svg => nav-cluster.svg} (100%) rename webui/assets/{nav_console.svg => nav-console-active.svg} (100%) create mode 100644 webui/assets/nav-console.svg create mode 100644 webui/assets/nav-documentation-active.svg rename webui/assets/{nav_documentation.svg => nav-documentation.svg} (100%) diff --git a/webui/assets/main.js b/webui/assets/main.js index dde813a40..b2f9cac0d 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -175,6 +175,46 @@ class REPL { } +function setNav(e) { + // toggle the nav buttons + document.getElementsByClassName("nav-active")[0].classList.remove("nav-active") + e.classList.add("nav-active") + + // toggle the main interface content divs + document.getElementsByClassName("interface-active")[0].classList.remove("interface-active") + name = e.id.substring(4) + interface_el = document.getElementById('interface-' + name) + interface_el.classList.add("interface-active") + + // toggle svgs + // show all inactive images + inactive_images = document.getElementsByClassName("nav-image") + for(var i=0; inav_cluster_1 diff --git a/webui/assets/nav_cluster.svg b/webui/assets/nav-cluster.svg similarity index 100% rename from webui/assets/nav_cluster.svg rename to webui/assets/nav-cluster.svg diff --git a/webui/assets/nav_console.svg b/webui/assets/nav-console-active.svg similarity index 100% rename from webui/assets/nav_console.svg rename to webui/assets/nav-console-active.svg diff --git a/webui/assets/nav-console.svg b/webui/assets/nav-console.svg new file mode 100644 index 000000000..e9d2a9569 --- /dev/null +++ b/webui/assets/nav-console.svg @@ -0,0 +1 @@ +nav_console diff --git a/webui/assets/nav-documentation-active.svg b/webui/assets/nav-documentation-active.svg new file mode 100644 index 000000000..b6e994980 --- /dev/null +++ b/webui/assets/nav-documentation-active.svg @@ -0,0 +1 @@ +documentation diff --git a/webui/assets/nav_documentation.svg b/webui/assets/nav-documentation.svg similarity index 100% rename from webui/assets/nav_documentation.svg rename to webui/assets/nav-documentation.svg diff --git a/webui/assets/style.css b/webui/assets/style.css index 68240ad32..15d50a6f8 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -123,16 +123,29 @@ em{ color: #1db598; } +.nav-image, +.nav-image-active{ + display: none; +} + +.nav-image-visible{ + display: flex; +} + .interface{ - display: flex; + display: none; flex: 1; flex-direction: column; align-items: center; background: #f2f7f9; } +.interface-active{ + display: flex; +} + .query{ margin-bottom: 30px; } diff --git a/webui/index.html b/webui/index.html index c8c8aa2a1..25ed7e055 100644 --- a/webui/index.html +++ b/webui/index.html @@ -15,20 +15,23 @@
-
- + -
- + -
- +
-
+

Query

@@ -54,10 +57,17 @@
- -
+
+ cluster stats! +
+ +
+ docs! +
+ +
From 233504b5c33c9e70f1dfdb3b5f421ea2d8ab401a Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 15:35:20 -0500 Subject: [PATCH 22/45] Rename db->index --- webui/assets/main.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index b2f9cac0d..3bc7f0cce 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -71,7 +71,7 @@ class REPL { var xhr = new XMLHttpRequest(); var e = document.getElementById("index-dropdown"); var indexname = e.options[e.selectedIndex].text; - xhr.open('POST', '/db/' + indexname + '/query'); // TODO db->index + xhr.open('POST', '/index/' + indexname + '/query'); xhr.setRequestHeader('Content-Type', 'application/text'); const repl = this @@ -97,7 +97,7 @@ class REPL { var output_json = JSON.parse(output_string) var result_class = "result-output" var getting_started_errors = [ - 'database not found', // TODO db->index + 'index not found', 'frame not found', ] @@ -107,8 +107,8 @@ class REPL { output_string += `

Just getting started? Try this:
- $ curl -XPOST "http://127.0.0.1:10101/db/test" -d '{"options": {"columnLabel": "col"}}' # create index "test"
- $ curl -XPOST "http://127.0.0.1:10101/db/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create frame "foo"
+ $ curl -XPOST "http://127.0.0.1:10101/index/test" -d '{"options": {"columnLabel": "col"}}' # create index "test"
+ $ curl -XPOST "http://127.0.0.1:10101/index/test/frame/foo" -d '{"options": {"rowLabel": "row"}}' # create frame "foo"
# Select "test" in the index dropdown above
SetBit(row=0, col=0, frame=foo) # Use PQL to set a bit ` @@ -154,15 +154,15 @@ class REPL { populate_index_dropdown() { var xhr = new XMLHttpRequest(); - xhr.open('GET', '/schema') // TODO schema->status (?) + xhr.open('GET', '/schema') var select = document.getElementById('index-dropdown') xhr.onload = function() { var schema = JSON.parse(xhr.responseText) - for(var i=0; iindex + for(var i=0; i Date: Tue, 25 Apr 2017 16:20:14 -0500 Subject: [PATCH 23/45] Display cluster status from endpoint --- webui/assets/main.js | 17 +++++++++++++++++ webui/assets/style.css | 16 ++++++++++++++-- webui/index.html | 10 +++++++++- 3 files changed, 40 insertions(+), 3 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 3bc7f0cce..2adec2148 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -186,6 +186,11 @@ function setNav(e) { interface_el = document.getElementById('interface-' + name) interface_el.classList.add("interface-active") + // hack hack + if(name == "cluster") { + update_cluster_status() + } + // toggle svgs // show all inactive images inactive_images = document.getElementsByClassName("nav-image") @@ -216,6 +221,18 @@ function setNav(e) { } +function update_cluster_status() { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '/status') + status_node = document.getElementById('status') + time_node = document.getElementById('status-time') + xhr.onload = function() { + status_formatted = JSON.stringify(JSON.parse(xhr.responseText), null, 4) + status_node.innerHTML = status_formatted + } + xhr.send(null) +} + const input = document.getElementById('query') const output = document.getElementById('outputs') const button = document.getElementById('query-btn') diff --git a/webui/assets/style.css b/webui/assets/style.css index 15d50a6f8..689fc919f 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -150,7 +150,8 @@ em{ margin-bottom: 30px; } .query, -.output-container{ +.output-container, +.status-container{ width: 75%; } @@ -206,7 +207,8 @@ em{ .result-input, .result-output, -.result-error{ +.result-error, +.status{ border-radius: 2px; background-color: #fafafa; border: solid 1.5px #e4eff4; @@ -231,6 +233,9 @@ em{ color: #fa3035; } +.status{ + white-space: pre; +} .raw{ height: 253px; @@ -238,3 +243,10 @@ em{ align-items: center; justify-content: center; } + + +.string { color: green; } +.number { color: darkorange; } +.boolean { color: blue; } +.null { color: magenta; } +.key { color: red; } \ No newline at end of file diff --git a/webui/index.html b/webui/index.html index 25ed7e055..931bf8f17 100644 --- a/webui/index.html +++ b/webui/index.html @@ -60,7 +60,15 @@
- cluster stats! +
+

Status

+        + +
+ +
+
+
From 5cbc95e229d1aa67da18396a619875bb2ad23179 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 16:20:51 -0500 Subject: [PATCH 24/45] Show last update time for status --- webui/assets/main.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/webui/assets/main.js b/webui/assets/main.js index 2adec2148..d5105c600 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -229,10 +229,20 @@ function update_cluster_status() { xhr.onload = function() { status_formatted = JSON.stringify(JSON.parse(xhr.responseText), null, 4) status_node.innerHTML = status_formatted + time_node.innerHTML = new Date().today() + " " + new Date().timeNow() } xhr.send(null) } +Date.prototype.today = function () { + return this.getFullYear() +"/"+ (((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ ((this.getDate() < 10)?"0":"") + this.getDate(); +} + +Date.prototype.timeNow = function () { + return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); +} + + const input = document.getElementById('query') const output = document.getElementById('outputs') const button = document.getElementById('query-btn') From a9e9905b30be99af48ac9c1f60c387f02f303223 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 16:25:06 -0500 Subject: [PATCH 25/45] Redo html indentation --- webui/index.html | 128 +++++++++++++++++++++++------------------------ 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/webui/index.html b/webui/index.html index 931bf8f17..344e5e224 100644 --- a/webui/index.html +++ b/webui/index.html @@ -1,83 +1,83 @@ - - - - - Pilosa Console - + + + + + Pilosa Console + -
- - Support -
-
-
- - - -
-
+
+ + Support +
+
+
+ + + +
+
-
-

Query

- -
+
+

Query

+ +
- -     - -
-
+ +     + +
+
-
+
-

Output

-
+

Output

+
- -
+ +
-
+
-
+
-
-
-

Status

-        - -
- -
-
-
-
+
+
+

Status

+        + +
+ +
+
+
+
-
- docs! -
+
+
+ docs! +
-
-
- +
+ From f59758f80f7156c95b138221aaf0e8861ead9d55 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Tue, 25 Apr 2017 22:03:13 -0500 Subject: [PATCH 26/45] Focus query textarea on load --- webui/assets/main.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webui/assets/main.js b/webui/assets/main.js index d5105c600..9d60cd41d 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -250,3 +250,5 @@ const button = document.getElementById('query-btn') repl = new REPL(input, output, button) repl.populate_index_dropdown() repl.bind_events() + +input.focus() From a8453d76560c7f00fd814831049ccb804bf23cd4 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 11:10:24 -0500 Subject: [PATCH 27/45] Replace ugly nav javascript with css --- webui/assets/main.js | 27 --------------------------- webui/assets/style.css | 18 ++++++++++++------ webui/index.html | 10 +++++----- 3 files changed, 17 insertions(+), 38 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 9d60cd41d..570aa8d2d 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -191,33 +191,6 @@ function setNav(e) { update_cluster_status() } - // toggle svgs - // show all inactive images - inactive_images = document.getElementsByClassName("nav-image") - for(var i=0; i .nav-image { display: flex; } +.nav-item > .nav-image-active { + display: none; +} + +.nav-active > .nav-image { + display: none; +} + +.nav-active > .nav-image-active { + display: flex; +} .interface{ diff --git a/webui/index.html b/webui/index.html index 344e5e224..1e3346d26 100644 --- a/webui/index.html +++ b/webui/index.html @@ -17,17 +17,17 @@
From 69b17dfca818d293f28e9fb4dcb72bbbb930868f Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 14:06:03 -0500 Subject: [PATCH 28/45] Add basic autocompletion for keywords --- webui/assets/main.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/webui/assets/main.js b/webui/assets/main.js index 570aa8d2d..0e7ed8d99 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -11,10 +11,25 @@ class REPL { bind_events() { const repl = this const keys = { + TAB: 9, ENTER: 13, UP_ARROW: 38, DOWN_ARROW: 40 } + const keywords = { + // keyword: length of substring that comes after cursor + "SetBit()": 1, + "ClearBit()": 1, + "SetBitmapAttrs()": 1, + "Bitmap()": 1, + "Union()": 1, + "Intersect()": 1, + "Difference()": 1, + "Count()": 1, + "Range()": 1, + "TopN()": 1, + "frame=": 0, + } this.input.addEventListener("keydown", (e) => { if (e.keyCode == keys.UP_ARROW) { @@ -52,6 +67,34 @@ class REPL { e.preventDefault() this.submit(); } + if (e.keyCode == keys.TAB) { + e.preventDefault() + + // extract word ending at cursor + var word_start = this.input.selectionEnd-1 + while(word_start>0) { + var c = this.input.value.charCodeAt(word_start) + if(!((c>64 && c<91) || (c>96 && c<123))) { + word_start++ + break + } + word_start-- + } + var input_word = this.input.value.substring(word_start, this.input.selectionEnd) + console.log(word_start, input_word) + + // check for keyword match and insert + // this just stops at the first match + for(var keyword in keywords) { + if(keyword.startsWith(input_word)){ + var completion = keyword.substring(input_word.length) + this.input.value += completion + var pos = this.input.value.length - keywords[keyword] + this.input.setSelectionRange(pos, pos) + break + } + } + } }) this.button.onclick = function() { repl.submit(); From 183d78b027ca67ce1a4c6bc6e6b51eb1f8260f6c Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 14:16:39 -0500 Subject: [PATCH 29/45] Show version string in header --- webui/assets/main.js | 13 +++++++++++++ webui/index.html | 2 +- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 0e7ed8d99..4ac04fbb4 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -218,6 +218,18 @@ class REPL { } +function populate_version() { + var xhr = new XMLHttpRequest(); + xhr.open('GET', '/version') + var node = document.getElementById('server-version') + + xhr.onload = function() { + version = JSON.parse(xhr.responseText)['version'] + node.innerHTML = version + } + xhr.send(null) +} + function setNav(e) { // toggle the nav buttons document.getElementsByClassName("nav-active")[0].classList.remove("nav-active") @@ -258,6 +270,7 @@ Date.prototype.timeNow = function () { return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds(); } +populate_version() const input = document.getElementById('query') const output = document.getElementById('outputs') diff --git a/webui/index.html b/webui/index.html index 1e3346d26..f12d8a841 100644 --- a/webui/index.html +++ b/webui/index.html @@ -11,7 +11,7 @@
- Support +
From f9e21359f7b78f6aa644f5a377bf07489a3fd45a Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 14:17:26 -0500 Subject: [PATCH 30/45] Remove debug print --- webui/assets/main.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 4ac04fbb4..190493edc 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -81,7 +81,6 @@ class REPL { word_start-- } var input_word = this.input.value.substring(word_start, this.input.selectionEnd) - console.log(word_start, input_word) // check for keyword match and insert // this just stops at the first match From 2956640a5c39754c3fc41da2ffa3f21857ce914f Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 14:35:23 -0500 Subject: [PATCH 31/45] Link to external docs --- webui/assets/main.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 190493edc..cd9846d5e 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -241,10 +241,14 @@ function setNav(e) { interface_el.classList.add("interface-active") // hack hack - if(name == "cluster") { - update_cluster_status() + switch(name) { + case "cluster": + update_cluster_status() + break + case "documentation": + open_external_docs() + break } - } @@ -261,6 +265,10 @@ function update_cluster_status() { xhr.send(null) } +function open_external_docs() { + window.open("https://www.pilosa.com/docs"); +} + Date.prototype.today = function () { return this.getFullYear() +"/"+ (((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ ((this.getDate() < 10)?"0":"") + this.getDate(); } From 1315d560a01510f3210275007e209394a8f5b092 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 14:35:35 -0500 Subject: [PATCH 32/45] Fix formatting --- webui/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/webui/index.html b/webui/index.html index f12d8a841..771507323 100644 --- a/webui/index.html +++ b/webui/index.html @@ -62,7 +62,6 @@

Status

-       
From 971cb6fc9ec17cd19df5f722e47535cbd1f42d68 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Fri, 28 Apr 2017 15:28:00 -0500 Subject: [PATCH 33/45] Render status response as tables instead of JSON --- webui/assets/main.js | 81 ++++++++++++++++++++++++++++++++++++++++-- webui/assets/style.css | 41 +++++++++++++++++---- webui/index.html | 18 +++++++--- 3 files changed, 127 insertions(+), 13 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index cd9846d5e..75c5d0e14 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -258,13 +258,90 @@ function update_cluster_status() { status_node = document.getElementById('status') time_node = document.getElementById('status-time') xhr.onload = function() { - status_formatted = JSON.stringify(JSON.parse(xhr.responseText), null, 4) - status_node.innerHTML = status_formatted + var status = JSON.parse(xhr.responseText) + render_status(status) time_node.innerHTML = new Date().today() + " " + new Date().timeNow() } xhr.send(null) } +function render_status(status) { + // render node table + var nodes_div = document.getElementById("status-nodes") + while (nodes_div.firstChild) { + nodes_div.removeChild(nodes_div.firstChild); + } + + var nodes = status["status"]["Nodes"] + table = document.createElement("table") + var caption = document.createElement("caption") + caption.innerHTML = "(" + nodes.length + ")" + table.appendChild(caption) + + var header = document.createElement('tr') + markup = `Host + State` + header.innerHTML = markup + table.appendChild(header) + for(var n=0; n${nodes[n]["Host"]} + ${nodes[n]["State"]}` + row.innerHTML = markup + table.appendChild(row) + } + nodes_div.appendChild(table) + + // render index tables + var indexes_div = document.getElementById("status-indexes") + while (indexes_div.firstChild) { + indexes_div.removeChild(indexes_div.firstChild); + } + + var indexes = nodes[0]["Indexes"] // TODO currently comes from only node 0 + for(var n=0; nName + Row Label + Cache Type + Cache Size` + header.innerHTML = markup + table.appendChild(header) + + var frames = indexes[n]["Frames"] + for(var m=0; m${frames[m]["Name"]} + ${frames[m]["Meta"]["RowLabel"]} + ${frames[m]["Meta"]["CacheType"]} + ${frames[m]["Meta"]["CacheSize"]}` + row.innerHTML = markup + table.appendChild(row) + } + indexes_div.appendChild(table) + } + + // render slice tables + // TODO enable when Slices element is present in status response + /* + var slices_div = document.getElementById("status-slices") + data = "" + for(var n=0; n" + } + } + slices_div.innerHTML = data + */ + +} + function open_external_docs() { window.open("https://www.pilosa.com/docs"); } diff --git a/webui/assets/style.css b/webui/assets/style.css index 24f0e8278..9490697ff 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -213,8 +213,7 @@ em{ .result-input, .result-output, -.result-error, -.status{ +.result-error{ border-radius: 2px; background-color: #fafafa; border: solid 1.5px #e4eff4; @@ -239,10 +238,6 @@ em{ color: #fa3035; } -.status{ - white-space: pre; -} - .raw{ height: 253px; display: flex; @@ -250,6 +245,40 @@ em{ justify-content: center; } +table{ + border: solid 0.5px #e0e0e0; + width: 100%; + margin-bottom: 30px; + /*color:#3c5f8d;*/ +} +caption{ + text-align:left; + font-size: 16px; + font-weight: bold; + line-height: 1.21; + letter-spacing: 2px; + text-align: left; +} +th{ + font-size: 14px; + font-weight: bold; + line-height: 1.21; + letter-spacing: 2px; + color: #102445; + text-transform: uppercase; + text-align: left; + padding: 21px 30px; + background-color: white; +} +tr{ + border: solid 0.5px #e0e0e0; +} +tr:nth-child(odd) { + background-color: #f2f7f9; +} +td{ + padding: 21px 30px; +} .string { color: green; } .number { color: darkorange; } diff --git a/webui/index.html b/webui/index.html index 771507323..5726d367c 100644 --- a/webui/index.html +++ b/webui/index.html @@ -60,13 +60,21 @@
+
-

Status

- -
- +

Nodes

+
-
+
+
+

Indexes

+
+
+
+
+

Slice Distribution

+
+ ...
From 0eceea249ce546e4905fc0d38bc7b85050953dbe Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 18:38:53 -0500 Subject: [PATCH 34/45] Modify table styles for spec --- webui/assets/style.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/webui/assets/style.css b/webui/assets/style.css index 9490697ff..a3a493e16 100644 --- a/webui/assets/style.css +++ b/webui/assets/style.css @@ -245,6 +245,11 @@ em{ justify-content: center; } + +.result-table > table { + border-left: solid 4px #1db598; +} + table{ border: solid 0.5px #e0e0e0; width: 100%; @@ -272,8 +277,9 @@ th{ } tr{ border: solid 0.5px #e0e0e0; + background-color: white; } -tr:nth-child(odd) { +tr:nth-child(even) { background-color: #f2f7f9; } td{ From deceac5f0513d68a4078095d6c24d1026dd91fcd Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Wed, 26 Apr 2017 18:39:23 -0500 Subject: [PATCH 35/45] Add tbody's to make styles work --- webui/assets/main.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 75c5d0e14..fcdd7cf4e 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -274,9 +274,11 @@ function render_status(status) { var nodes = status["status"]["Nodes"] table = document.createElement("table") + tbody = document.createElement("tbody") + table.appendChild(tbody) var caption = document.createElement("caption") caption.innerHTML = "(" + nodes.length + ")" - table.appendChild(caption) + tbody.appendChild(caption) var header = document.createElement('tr') markup = `Host @@ -288,7 +290,7 @@ function render_status(status) { markup = `${nodes[n]["Host"]} ${nodes[n]["State"]}` row.innerHTML = markup - table.appendChild(row) + tbody.appendChild(row) } nodes_div.appendChild(table) @@ -301,6 +303,8 @@ function render_status(status) { var indexes = nodes[0]["Indexes"] // TODO currently comes from only node 0 for(var n=0; nCache Type Cache Size` header.innerHTML = markup - table.appendChild(header) + tbody.appendChild(header) var frames = indexes[n]["Frames"] for(var m=0; m${frames[m]["Meta"]["CacheType"]} ${frames[m]["Meta"]["CacheSize"]}` row.innerHTML = markup - table.appendChild(row) + tbody.appendChild(row) } indexes_div.appendChild(table) } From 05782f0b73db70819f7c643f3578cf53118b34a3 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Thu, 27 Apr 2017 18:45:52 -0500 Subject: [PATCH 36/45] Don't crash on an empty frame list --- webui/assets/main.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index fcdd7cf4e..1789814d2 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -318,14 +318,15 @@ function render_status(status) { tbody.appendChild(header) var frames = indexes[n]["Frames"] - for(var m=0; m${frames[m]["Name"]} - ${frames[m]["Meta"]["RowLabel"]} - ${frames[m]["Meta"]["CacheType"]} - ${frames[m]["Meta"]["CacheSize"]}` - row.innerHTML = markup - tbody.appendChild(row) + if(frames) { + for(var m=0; m${frames[m]["Name"]} + ${frames[m]["Meta"]["RowLabel"]} + ${frames[m]["Meta"]["CacheType"]} + ${frames[m]["Meta"]["CacheSize"]}` + tbody.appendChild(row) + } } indexes_div.appendChild(table) } From 3fb3ceac3e1597642a4c58f6578afb0ebfea4bf7 Mon Sep 17 00:00:00 2001 From: Alan Bernstein Date: Thu, 27 Apr 2017 18:47:07 -0500 Subject: [PATCH 37/45] Allow anchor links --- webui/assets/main.js | 24 +++++++++++++++++++----- webui/index.html | 6 +++--- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/webui/assets/main.js b/webui/assets/main.js index 1789814d2..b0ca194e1 100644 --- a/webui/assets/main.js +++ b/webui/assets/main.js @@ -229,16 +229,20 @@ function populate_version() { xhr.send(null) } -function setNav(e) { +function handle_nav_click(e) { + // e.id = "nav-xxx" + name = e.id.substring(4) + set_active_pane_by_name(name) +} + +function set_active_pane_by_name(name) { // toggle the nav buttons document.getElementsByClassName("nav-active")[0].classList.remove("nav-active") - e.classList.add("nav-active") + document.getElementById("nav-" + name).classList.add("nav-active") // toggle the main interface content divs document.getElementsByClassName("interface-active")[0].classList.remove("interface-active") - name = e.id.substring(4) - interface_el = document.getElementById('interface-' + name) - interface_el.classList.add("interface-active") + document.getElementById('interface-' + name).classList.add("interface-active") // hack hack switch(name) { @@ -351,6 +355,14 @@ function open_external_docs() { window.open("https://www.pilosa.com/docs"); } +function check_anchor_uri() { + const pane_names = {"console": 0, "cluster": 0, "documentation": 0} + var anchor = window.location.hash.substr(1); + if(anchor in pane_names) { + set_active_pane_by_name(anchor) + } +} + Date.prototype.today = function () { return this.getFullYear() +"/"+ (((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ ((this.getDate() < 10)?"0":"") + this.getDate(); } @@ -370,3 +382,5 @@ repl.populate_index_dropdown() repl.bind_events() input.focus() + +check_anchor_uri() diff --git a/webui/index.html b/webui/index.html index 5726d367c..7fe442352 100644 --- a/webui/index.html +++ b/webui/index.html @@ -15,17 +15,17 @@
-