Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #3033 from influxdata/feature/ifql-builder 

Time Machine
pull/10616/head
Brandon Farmer 2018-03-29 16:30:44 -07:00 committed by GitHub
parent 0409967dfc dedd2fd7f3
commit cccc9a38ce
50 changed files with 1994 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
CONTRIBUTING.md
View File

@ -1,9 +1,9 @@
Contributing to Chronograf
==========================
# Contributing to Chronograf
## Bug reports
Bug reports
---------------
Before you file an issue, please search existing issues in case it has already been filed, or perhaps even fixed. If you file an issue, please include the following.
* Full details of your operating system (or distribution) e.g. 64-bit Ubuntu 14.04.
* The version of Chronograf you are running
* Whether you installed it using a pre-built package, or built it from source.
@ -13,77 +13,65 @@ Before you file an issue, please search existing issues in case it has already b
Remember the golden rule of bug reports: **The easier you make it for us to reproduce the problem, the faster it will get fixed.**
If you have never written a bug report before, or if you want to brush up on your bug reporting skills, we recommend reading [Simon Tatham's essay "How to Report Bugs Effectively."](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html)
Please note that issues are *not the place to file general questions* such as "How do I use Chronograf?" Questions of this nature should be sent to the [InfluxDB Google Group](https://groups.google.com/forum/#!forum/influxdb), not filed as issues. Issues like this will be closed.
Please note that issues are _not the place to file general questions_ such as "How do I use Chronograf?" Questions of this nature should be sent to the [InfluxDB Google Group](https://groups.google.com/forum/#!forum/influxdb), not filed as issues. Issues like this will be closed.
## Feature requests
Feature requests
----------------
We really like to receive feature requests, as it helps us prioritize our work. Please be clear about your requirements, as incomplete feature requests may simply be closed if we don't understand what you would like to see added to Chronograf.
Contributing to the source code
-------------------------------
## Contributing to the source code
Chronograf is built using Go for its API backend and serving the front-end assets, and uses Dep for dependency management. The front-end visualization is built with React (JavaScript) and uses Yarn for dependency management. The assumption is that all your Go development are done in `$GOPATH/src`. `GOPATH` can be any directory under which Chronograf and all its dependencies will be cloned. For full details on the project structure, follow along below.
Submitting a pull request
-------------------------
To submit a pull request you should fork the Chronograf repository, and make your change on a feature branch of your fork. Then generate a pull request from your branch against *master* of the Chronograf repository. Include in your pull request details of your change -- the why *and* the how -- as well as the testing your performed. Also, be sure to run the test suite with your change in place. Changes that cause tests to fail cannot be merged.
## Submitting a pull request
To submit a pull request you should fork the Chronograf repository, and make your change on a feature branch of your fork. Then generate a pull request from your branch against _master_ of the Chronograf repository. Include in your pull request details of your change -- the why _and_ the how -- as well as the testing your performed. Also, be sure to run the test suite with your change in place. Changes that cause tests to fail cannot be merged.
There will usually be some back and forth as we finalize the change, but once that completes it may be merged.
To assist in review for the PR, please add the following to your pull request comment:
```md
- [ ] CHANGELOG.md updated
- [ ] Rebased/mergable
- [ ] Tests pass
- [ ] Sign [CLA](https://influxdata.com/community/cla/) (if not already signed)
* [ ] CHANGELOG.md updated
* [ ] Rebased/mergable
* [ ] Tests pass
* [ ] Sign [CLA](https://influxdata.com/community/cla/) (if not already signed)
```
Signing the CLA
---------------
## Signing the CLA
If you are going to be contributing back to Chronograf please take a second to sign our CLA, which can be found
[on our website](https://influxdata.com/community/cla/).
Installing & Using Yarn
--------------
## Installing & Using Yarn
You'll need to install Yarn to manage the frontend (JavaScript) dependencies.
* [Install Yarn](https://yarnpkg.com/en/docs/install)
To add a dependency via Yarn, for example, run `yarn add <dependency>` from within the `/chronograf/ui` directory.
Installing Go
-------------
Chronograf requires Go 1.7.1 or higher.
## Installing Go
At InfluxData we find gvm, a Go version manager, useful for installing and managing Go. For instructions
on how to install it see [the gvm page on github](https://github.com/moovweb/gvm).
Chronograf requires Go 1.10 or higher.
After installing gvm you can install and set the default go version by
running the following:
## Installing & Using Dep
```bash
gvm install go1.7.5
gvm use go1.7.5 --default
```
Installing & Using Dep
--------------
You'll need to install Dep to manage the backend (Go) dependencies.
* [Install Dep](https://github.com/golang/dep)
To add a dependency via Dep, for example, run `dep ensure -add <dependency>` from within the `/chronograf` directory. _Note that as of this writing, `dep ensure` will modify many extraneous vendor files, so you'll need to run `dep prune` to clean this up before committing your changes. Apparently, the next version of `dep` will take care of this step for you._
Revision Control Systems
------------------------
Go has the ability to import remote packages via revision control systems with the `go get` command. To ensure that you can retrieve any remote package, be sure to install the following rcs software to your system.
Currently the project only depends on `git` and `mercurial`.
## Revision Control Systems
Go has the ability to import remote packages via revision control systems with the `go get` command. To ensure that you can retrieve any remote package, be sure to install the following rcs software to your system.
Currently the project only depends on `git`.
* [Install Git](http://git-scm.com/book/en/Getting-Started-Installing-Git)
* [Install Mercurial](http://mercurial.selenic.com/wiki/Download)
Getting the source
------------------
## Getting the source
Setup the project structure and fetch the repo like so:
```bash
@ -94,8 +82,8 @@ Setup the project structure and fetch the repo like so:
You can add the line `export GOPATH=$HOME/go` to your bash/zsh file to be set for every shell instead of having to manually run it everytime.
Cloning a fork
--------------
## Cloning a fork
If you wish to work with fork of Chronograf, your own fork for example, you must still follow the directory structure above. But instead of cloning the main repo, instead clone your fork. Follow the steps below to work with a fork:
```bash
@ -107,8 +95,8 @@ If you wish to work with fork of Chronograf, your own fork for example, you must
Retaining the directory structure `$GOPATH/src/github.com/influxdata` is necessary so that Go imports work correctly.
Build and Test
--------------
## Build and Test
Make sure you have `go` and `yarn` installed and the project structure as shown above. We provide a `Makefile` to get up and running quickly, so all you'll need to do is run the following:
```bash
@ -125,6 +113,6 @@ To run the tests, execute the following command:
make test
```
Continuous Integration testing
-----
## Continuous Integration testing
Chronograf uses CircleCI for continuous integration testing. To see how the code is built and tested, check out [this file](https://github.com/influxdata/chronograf/blob/master/Makefile). It closely follows the build and test process outlined above. You can see the exact version of Go Chronograf uses for testing by consulting that file.

188
Gopkg.lock generated
View File

@ -11,6 +11,12 @@
packages = ["."]
revision = "3ec0642a7fb6488f65b06f9040adc67e3990296a"
[[projects]]
branch = "master"
name = "github.com/beorn7/perks"
packages = ["quantile"]
revision = "3a771d992973f24aa725d07868b467d1ddfceafb"
[[projects]]
name = "github.com/boltdb/bolt"
packages = ["."]
@ -39,8 +45,38 @@
[[projects]]
name = "github.com/gogo/protobuf"
packages = ["gogoproto","jsonpb","plugin/compare","plugin/defaultcheck","plugin/description","plugin/embedcheck","plugin/enumstringer","plugin/equal","plugin/face","plugin/gostring","plugin/marshalto","plugin/oneofcheck","plugin/populate","plugin/size","plugin/stringer","plugin/testgen","plugin/union","plugin/unmarshal","proto","protoc-gen-gogo","protoc-gen-gogo/descriptor","protoc-gen-gogo/generator","protoc-gen-gogo/grpc","protoc-gen-gogo/plugin","vanity","vanity/command"]
revision = "6abcf94fd4c97dcb423fdafd42fe9f96ca7e421b"
packages = [
"codec",
"gogoproto",
"jsonpb",
"plugin/compare",
"plugin/defaultcheck",
"plugin/description",
"plugin/embedcheck",
"plugin/enumstringer",
"plugin/equal",
"plugin/face",
"plugin/gostring",
"plugin/marshalto",
"plugin/oneofcheck",
"plugin/populate",
"plugin/size",
"plugin/stringer",
"plugin/testgen",
"plugin/union",
"plugin/unmarshal",
"proto",
"protoc-gen-gogo",
"protoc-gen-gogo/descriptor",
"protoc-gen-gogo/generator",
"protoc-gen-gogo/grpc",
"protoc-gen-gogo/plugin",
"sortkeys",
"types",
"vanity",
"vanity/command"
]
revision = "49944b4a4b085da44c43d4b233ea40787396371f"
[[projects]]
name = "github.com/golang/protobuf"
@ -50,7 +86,13 @@
[[projects]]
name = "github.com/google/go-cmp"
packages = ["cmp","cmp/cmpopts","cmp/internal/diff","cmp/internal/function","cmp/internal/value"]
packages = [
"cmp",
"cmp/cmpopts",
"cmp/internal/diff",
"cmp/internal/function",
"cmp/internal/value"
]
revision = "8099a9787ce5dc5984ed879a3bda47dc730a8e97"
version = "v0.1.0"
@ -65,22 +107,79 @@
packages = ["query"]
revision = "53e6ce116135b80d037921a7fdd5138cf32d7a8a"
[[projects]]
name = "github.com/influxdata/ifql"
packages = [
".",
"ast",
"compiler",
"complete",
"functions",
"interpreter",
"parser",
"query",
"query/control",
"query/execute",
"query/execute/storage",
"query/plan",
"semantic"
]
revision = "9445c4494d4421db2ab1aaaf6f4069446f11752e"
[[projects]]
name = "github.com/influxdata/influxdb"
packages = ["influxql","influxql/internal","influxql/neldermead","models","pkg/escape"]
packages = [
"influxql",
"influxql/internal",
"influxql/neldermead",
"models",
"pkg/escape"
]
revision = "cd9363b52cac452113b95554d98a6be51beda24e"
version = "v1.1.5"
[[projects]]
name = "github.com/influxdata/kapacitor"
packages = ["client/v1","pipeline","pipeline/tick","services/k8s/client","tick","tick/ast","tick/stateful","udf/agent"]
packages = [
"client/v1",
"pipeline",
"pipeline/tick",
"services/k8s/client",
"tick",
"tick/ast",
"tick/stateful",
"udf/agent"
]
revision = "6de30070b39afde111fea5e041281126fe8aae31"
[[projects]]
branch = "master"
name = "github.com/influxdata/tdigest"
packages = ["."]
revision = "617b83f940fd9acd207f712561a8a0590277fb38"
[[projects]]
name = "github.com/influxdata/usage-client"
packages = ["v1"]
revision = "6d3895376368aa52a3a81d2a16e90f0f52371967"
[[projects]]
branch = "master"
name = "github.com/influxdata/yamux"
packages = ["."]
revision = "1f58ded512de5feabbe30b60c7d33a7a896c5f16"
[[projects]]
branch = "master"
name = "github.com/influxdata/yarpc"
packages = [
".",
"codes",
"status",
"yarpcproto"
]
revision = "f0da2db138cad2fb425541938fc28dd5a5bc6918"
[[projects]]
name = "github.com/jessevdk/go-flags"
packages = ["."]
@ -91,12 +190,60 @@
packages = ["."]
revision = "46eb4c183bfc1ebb527d9d19bcded39476302eb8"
[[projects]]
name = "github.com/matttproud/golang_protobuf_extensions"
packages = ["pbutil"]
revision = "3247c84500bff8d9fb6d579d800f20b3e091582c"
version = "v1.0.0"
[[projects]]
name = "github.com/opentracing/opentracing-go"
packages = [
".",
"log"
]
revision = "1949ddbfd147afd4d964a9f00b24eb291e0e7c38"
version = "v1.0.2"
[[projects]]
name = "github.com/pkg/errors"
packages = ["."]
revision = "645ef00459ed84a119197bfb8d8205042c6df63d"
version = "v0.8.0"
[[projects]]
name = "github.com/prometheus/client_golang"
packages = ["prometheus"]
revision = "c5b7fccd204277076155f10851dad72b76a49317"
version = "v0.8.0"
[[projects]]
branch = "master"
name = "github.com/prometheus/client_model"
packages = ["go"]
revision = "99fa1f4be8e564e8a6b613da7fa6f46c9edafc6c"
[[projects]]
branch = "master"
name = "github.com/prometheus/common"
packages = [
"expfmt",
"internal/bitbucket.org/ww/goautoneg",
"model"
]
revision = "e4aa40a9169a88835b849a6efb71e05dc04b88f0"
[[projects]]
branch = "master"
name = "github.com/prometheus/procfs"
packages = [
".",
"internal/util",
"nfs",
"xfs"
]
revision = "780932d4fbbe0e69b84c34c20f5c8d0981e109ea"
[[projects]]
name = "github.com/satori/go.uuid"
packages = ["."]
@ -115,12 +262,20 @@
[[projects]]
name = "golang.org/x/net"
packages = ["context","context/ctxhttp"]
packages = [
"context",
"context/ctxhttp"
]
revision = "749a502dd1eaf3e5bfd4f8956748c502357c0bbe"
[[projects]]
name = "golang.org/x/oauth2"
packages = [".","github","heroku","internal"]
packages = [
".",
"github",
"heroku",
"internal"
]
revision = "2f32c3ac0fa4fb807a0fcefb0b6f2468a0d99bd0"
[[projects]]
@ -131,18 +286,31 @@
[[projects]]
name = "google.golang.org/api"
packages = ["gensupport","googleapi","googleapi/internal/uritemplates","oauth2/v2"]
packages = [
"gensupport",
"googleapi",
"googleapi/internal/uritemplates",
"oauth2/v2"
]
revision = "bc20c61134e1d25265dd60049f5735381e79b631"
[[projects]]
name = "google.golang.org/appengine"
packages = ["internal","internal/base","internal/datastore","internal/log","internal/remote_api","internal/urlfetch","urlfetch"]
packages = [
"internal",
"internal/base",
"internal/datastore",
"internal/log",
"internal/remote_api",
"internal/urlfetch",
"urlfetch"
]
revision = "150dc57a1b433e64154302bdc40b6bb8aefa313a"
version = "v1.0.0"
[solve-meta]
analyzer-name = "dep"
analyzer-version = 1
inputs-digest = "a4df1b0953349e64a89581f4b83ac3a2f40e17681e19f8de3cbf828b6375a3ba"
inputs-digest = "3dee5534e81013d8f9d3b8cf80ad614dd8f0168114e63e1f1a5ba60733891e83"
solver-name = "gps-cdcl"
solver-version = 1

5
Gopkg.toml
View File

@ -26,7 +26,7 @@ required = ["github.com/kevinburke/go-bindata","github.com/gogo/protobuf/proto",
[[constraint]]
name = "github.com/gogo/protobuf"
revision = "6abcf94fd4c97dcb423fdafd42fe9f96ca7e421b"
revision = "49944b4a4b085da44c43d4b233ea40787396371f"
[[constraint]]
name = "github.com/google/go-github"
@ -72,6 +72,9 @@ required = ["github.com/kevinburke/go-bindata","github.com/gogo/protobuf/proto",
name = "github.com/influxdata/influxdb"
version = "~1.1.0"
[[constraint]]
name = "github.com/influxdata/ifql"
revision = "9445c4494d4421db2ab1aaaf6f4069446f11752e"
[[constraint]]
name = "github.com/influxdata/kapacitor"

3
Makefile
View File

@ -124,3 +124,6 @@ clean:
ctags:
ctags -R --languages="Go" --exclude=.git --exclude=ui .
lint:
cd ui && yarn prettier

2
README.md
View File

@ -183,7 +183,7 @@ docker pull chronograf:1.4.3.0
### From Source
* Chronograf works with go 1.8.x, node 6.x/7.x, and yarn 0.18+.
* Chronograf works with go 1.10+, node 8.x, and yarn 1.5+.
* Chronograf requires [Kapacitor](https://github.com/influxdata/kapacitor)
1.2.x+ to create and store alerts.

2
circle.yml
View File

@ -3,7 +3,7 @@ machine:
services:
- docker
environment:
DOCKER_TAG: chronograf-20180207
DOCKER_TAG: chronograf-20180327
dependencies:
override:

12
etc/Dockerfile_build
View File

@ -20,24 +20,18 @@ RUN pip install boto requests python-jose --upgrade
RUN gem install fpm
# Install node
ENV NODE_VERSION v6.12.3
RUN wget -q https://nodejs.org/dist/latest-v6.x/node-${NODE_VERSION}-linux-x64.tar.gz; \
ENV NODE_VERSION v8.10.0
RUN wget -q https://nodejs.org/dist/${NODE_VERSION}/node-${NODE_VERSION}-linux-x64.tar.gz; \
tar -xvf node-${NODE_VERSION}-linux-x64.tar.gz -C / --strip-components=1; \
rm -f node-${NODE_VERSION}-linux-x64.tar.gz
# Update npm
RUN cd $(npm root -g)/npm \
&& npm install fs-extra \
&& sed -i -e s/graceful-fs/fs-extra/ -e s/fs.rename/fs.move/ ./lib/utils/rename.js
RUN npm install npm -g
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && sudo apt-get install yarn
# Install go
ENV GOPATH /root/go
ENV GO_VERSION 1.9.4
ENV GO_VERSION 1.10
ENV GO_ARCH amd64
RUN wget https://storage.googleapis.com/golang/go${GO_VERSION}.linux-${GO_ARCH}.tar.gz; \
tar -C /usr/local/ -xf /go${GO_VERSION}.linux-${GO_ARCH}.tar.gz ; \

10
integrations/server_test.go
View File

@ -2715,6 +2715,11 @@ func TestServer(t *testing.T) {
"logout": "/oauth/logout",
"external": {
"statusFeed": ""
},
"ifql": {
"ast": "/chronograf/v1/ifql/ast",
"self": "/chronograf/v1/ifql",
"suggestions": "/chronograf/v1/ifql/suggestions"
}
}
`,
@ -2798,6 +2803,11 @@ func TestServer(t *testing.T) {
"logout": "/oauth/logout",
"external": {
"statusFeed": ""
},
"ifql": {
"ast": "/chronograf/v1/ifql/ast",
"self": "/chronograf/v1/ifql",
"suggestions": "/chronograf/v1/ifql/suggestions"
}
}
`,

99
server/ifql.go Normal file
View File

@ -0,0 +1,99 @@
package server
import (
"encoding/json"
"fmt"
"net/http"
"github.com/bouk/httprouter"
"github.com/influxdata/ifql"
"github.com/influxdata/ifql/parser"
)
// SuggestionsResponse provides a list of available IFQL functions
type SuggestionsResponse struct {
Functions []SuggestionResponse `json:"funcs"`
}
// SuggestionResponse provides the parameters available for a given IFQL function
type SuggestionResponse struct {
Name string `json:"name"`
Params map[string]string `json:"params"`
}
type ifqlLinks struct {
Self string `json:"self"` // Self link mapping to this resource
Suggestions string `json:"suggestions"` // URL for ifql builder function suggestions
}
type ifqlResponse struct {
Links ifqlLinks `json:"links"`
}
// IFQL returns a list of links for the IFQL API
func (s *Service) IFQL(w http.ResponseWriter, r *http.Request) {
httpAPIIFQL := "/chronograf/v1/ifql"
res := ifqlResponse{
Links: ifqlLinks{
Self: fmt.Sprintf("%s", httpAPIIFQL),
Suggestions: fmt.Sprintf("%s/suggestions", httpAPIIFQL),
},
}
encodeJSON(w, http.StatusOK, res, s.Logger)
}
// IFQLSuggestions returns a list of available IFQL functions for the IFQL Builder
func (s *Service) IFQLSuggestions(w http.ResponseWriter, r *http.Request) {
completer := ifql.DefaultCompleter()
names := completer.FunctionNames()
var functions []SuggestionResponse
for _, name := range names {
suggestion, err := completer.FunctionSuggestion(name)
if err != nil {
Error(w, http.StatusNotFound, err.Error(), s.Logger)
return
}
functions = append(functions, SuggestionResponse{
Name: name,
Params: suggestion.Params,
})
}
res := SuggestionsResponse{Functions: functions}
encodeJSON(w, http.StatusOK, res, s.Logger)
}
// IFQLSuggestion returns the function parameters for the requested function
func (s *Service) IFQLSuggestion(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
name := httprouter.GetParamFromContext(ctx, "name")
completer := ifql.DefaultCompleter()
suggestion, err := completer.FunctionSuggestion(name)
if err != nil {
Error(w, http.StatusNotFound, err.Error(), s.Logger)
}
encodeJSON(w, http.StatusOK, SuggestionResponse{Name: name, Params: suggestion.Params}, s.Logger)
}
type ASTRequest struct {
Body string `json:"body"`
}
func (s *Service) IFQLAST(w http.ResponseWriter, r *http.Request) {
var request ASTRequest
err := json.NewDecoder(r.Body).Decode(&request)
if err != nil {
invalidJSON(w, s.Logger)
}
ast, err := parser.NewAST(request.Body)
if err != nil {
Error(w, http.StatusInternalServerError, err.Error(), s.Logger)
}
encodeJSON(w, http.StatusOK, ast, s.Logger)
}

6
server/links.go
View File

@ -5,6 +5,12 @@ import (
"net/url"
)
type getIFQLLinksResponse struct {
AST string `json:"ast"`
Self string `json:"self"`
Suggestions string `json:"suggestions"`
}
type getConfigLinksResponse struct {
Self string `json:"self"` // Location of the whole global application configuration
Auth string `json:"auth"` // Location of the auth section of the global application configuration

6
server/mux.go
View File

@ -156,6 +156,12 @@ func NewMux(opts MuxOpts, service Service) http.Handler {
router.PATCH("/chronograf/v1/sources/:id", EnsureEditor(service.UpdateSource))
router.DELETE("/chronograf/v1/sources/:id", EnsureEditor(service.RemoveSource))
// IFQL
router.GET("/chronograf/v1/ifql", EnsureViewer(service.IFQL))
router.POST("/chronograf/v1/ifql/ast", EnsureViewer(service.IFQLAST))
router.GET("/chronograf/v1/ifql/suggestions", EnsureViewer(service.IFQLSuggestions))
router.GET("/chronograf/v1/ifql/suggestions/:name", EnsureViewer(service.IFQLSuggestion))
// Source Proxy to Influx; Has gzip compression around the handler
influx := gziphandler.GzipHandler(http.HandlerFunc(EnsureViewer(service.Influx)))
router.Handler("POST", "/chronograf/v1/sources/:id/proxy", influx)

6
server/routes.go
View File

@ -44,6 +44,7 @@ type getRoutesResponse struct {
Auth []AuthRoute `json:"auth"` // Location of all auth routes.
Logout *string `json:"logout,omitempty"` // Location of the logout route for all auth routes
ExternalLinks getExternalLinksResponse `json:"external"` // All external links for the client to use
IFQL getIFQLLinksResponse `json:"ifql"`
}
// AllRoutes is a handler that returns all links to resources in Chronograf server, as well as
@ -94,6 +95,11 @@ func (a *AllRoutes) ServeHTTP(w http.ResponseWriter, r *http.Request) {
StatusFeed: &a.StatusFeed,
CustomLinks: customLinks,
},
IFQL: getIFQLLinksResponse{
Self: "/chronograf/v1/ifql",
AST: "/chronograf/v1/ifql/ast",
Suggestions: "/chronograf/v1/ifql/suggestions",
},
}
// The JSON response will have no field present for the LogoutLink if there is no logout link.

6
server/routes_test.go
View File

@ -29,7 +29,7 @@ func TestAllRoutes(t *testing.T) {
if err := json.Unmarshal(body, &routes); err != nil {
t.Error("TestAllRoutes not able to unmarshal JSON response")
}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[],"external":{"statusFeed":""}}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[],"external":{"statusFeed":""},"ifql":{"ast":"/chronograf/v1/ifql/ast","self":"/chronograf/v1/ifql","suggestions":"/chronograf/v1/ifql/suggestions"}}
`
if want != string(body) {
t.Errorf("TestAllRoutes\nwanted\n*%s*\ngot\n*%s*", want, string(body))
@ -67,7 +67,7 @@ func TestAllRoutesWithAuth(t *testing.T) {
if err := json.Unmarshal(body, &routes); err != nil {
t.Error("TestAllRoutesWithAuth not able to unmarshal JSON response")
}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[{"name":"github","label":"GitHub","login":"/oauth/github/login","logout":"/oauth/github/logout","callback":"/oauth/github/callback"}],"logout":"/oauth/logout","external":{"statusFeed":""}}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[{"name":"github","label":"GitHub","login":"/oauth/github/login","logout":"/oauth/github/logout","callback":"/oauth/github/callback"}],"logout":"/oauth/logout","external":{"statusFeed":""},"ifql":{"ast":"/chronograf/v1/ifql/ast","self":"/chronograf/v1/ifql","suggestions":"/chronograf/v1/ifql/suggestions"}}
`
if want != string(body) {
t.Errorf("TestAllRoutesWithAuth\nwanted\n*%s*\ngot\n*%s*", want, string(body))
@ -100,7 +100,7 @@ func TestAllRoutesWithExternalLinks(t *testing.T) {
if err := json.Unmarshal(body, &routes); err != nil {
t.Error("TestAllRoutesWithExternalLinks not able to unmarshal JSON response")
}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[],"external":{"statusFeed":"http://pineapple.life/feed.json","custom":[{"name":"cubeapple","url":"https://cube.apple"}]}}
want := `{"layouts":"/chronograf/v1/layouts","users":"/chronograf/v1/organizations/default/users","allUsers":"/chronograf/v1/users","organizations":"/chronograf/v1/organizations","mappings":"/chronograf/v1/mappings","sources":"/chronograf/v1/sources","me":"/chronograf/v1/me","environment":"/chronograf/v1/env","dashboards":"/chronograf/v1/dashboards","config":{"self":"/chronograf/v1/config","auth":"/chronograf/v1/config/auth"},"auth":[],"external":{"statusFeed":"http://pineapple.life/feed.json","custom":[{"name":"cubeapple","url":"https://cube.apple"}]},"ifql":{"ast":"/chronograf/v1/ifql/ast","self":"/chronograf/v1/ifql","suggestions":"/chronograf/v1/ifql/suggestions"}}
`
if want != string(body) {
t.Errorf("TestAllRoutesWithExternalLinks\nwanted\n*%s*\ngot\n*%s*", want, string(body))

7
ui/.storybook/config.js
View File

@ -1,7 +0,0 @@
import { configure } from '@kadira/storybook';
function loadStories() {
require('../stories');
}
configure(loadStories, module);

1
ui/.storybook/head.html
View File

@ -1 +0,0 @@
<link href="/style.css" rel="stylesheet">

54
ui/.storybook/webpack.config.js
View File

@ -1,54 +0,0 @@
const path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add addional webpack configurations.
// For more information refer the docs: https://getstorybook.io/docs/configurations/custom-webpack-config
// IMPORTANT
// When you add this file, we won't add the default configurations which is similar
// to "React Create App". This only has babel loader to load JavaScript.
module.exports = {
debug: true,
devtool: 'source-map',
plugins: [
new ExtractTextPlugin("style.css"),
],
output: {
publicPath: '/',
path: path.resolve(__dirname, '../build'),
filename: '[name].[chunkhash].dev.js',
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader!resolve-url!sass?sourceMap'),
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader'),
},
{
test : /\.(ico|png|jpg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
options: {
limit: 100000,
},
loader : 'file-loader',
},
],
},
resolve: {
alias: {
src: path.resolve(__dirname, '..', 'src'),
shared: path.resolve(__dirname, '..', 'src', 'shared'),
style: path.resolve(__dirname, '..', 'src', 'style'),
utils: path.resolve(__dirname, '..', 'src', 'utils'),
},
},
sassLoader: {
includePaths: [path.resolve(__dirname, "node_modules")],
},
postcss: require('../webpack/postcss'),
};

66
ui/karma.conf.js
View File

@ -1,66 +0,0 @@
const webpack = require('webpack')
const path = require('path')
module.exports = function(config) {
config.set({
browsers: ['PhantomJS'],
frameworks: ['mocha'],
files: [
'node_modules/babel-polyfill/dist/polyfill.js',
'spec/spec-helper.js',
'spec/index.js',
],
preprocessors: {
'spec/spec-helper.js': ['webpack', 'sourcemap'],
'spec/index.js': ['webpack', 'sourcemap'],
},
// For more detailed reporting on tests, you can add 'verbose' and/or 'progress'.
// This can also be done via the command line with `yarn test -- --reporters=verbose`.
reporters: ['dots'],
webpack: {
devtool: 'inline-source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.css/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!postcss-loader',
},
{
test: /\.scss/,
exclude: /node_modules/,
loader: 'style-loader!css-loader!sass-loader',
},
{
// Sinon behaves weirdly with webpack, see https://github.com/webpack/webpack/issues/304
test: /sinon\/pkg\/sinon\.js/,
loader: 'imports?define=>false,require=>false',
},
],
},
externals: {
'react/addons': true,
'react/lib/ExecutionEnvironment': true,
'react/lib/ReactContext': true,
},
resolve: {
alias: {
app: path.resolve(__dirname, 'app'),
src: path.resolve(__dirname, 'src'),
chronograf: path.resolve(__dirname, 'src', 'chronograf'),
shared: path.resolve(__dirname, 'src', 'shared'),
style: path.resolve(__dirname, 'src', 'style'),
utils: path.resolve(__dirname, 'src', 'utils'),
},
},
},
webpackServer: {
noInfo: true, // please don't spam the console when running in karma!
},
})
}

4
ui/mocks/ifql/apis/index.ts Normal file
View File

@ -0,0 +1,4 @@
jest.mock('src/utils/ajax', () => require('mocks/utils/ajax'))
export const getSuggestions = jest.fn(() => Promise.resolve([]))
export const getAST = jest.fn(() => Promise.resolve({}))

2
ui/mocks/utils/ajax.ts
View File

@ -1 +1 @@
export default jest.fn(() => Promise.resolve())
export default jest.fn(() => Promise.resolve({data: {}}))

35
ui/src/ifql/apis/index.ts Normal file
View File

@ -0,0 +1,35 @@
import AJAX from 'src/utils/ajax'
export const getSuggestions = async (url: string) => {
try {
const {data} = await AJAX({
url,
})
return data.funcs
} catch (error) {
console.error('Could not get suggestions', error)
throw error
}
}
interface ASTRequest {
url: string
body: string
}
export const getAST = async (request: ASTRequest) => {
const {url, body} = request
try {
const {data} = await AJAX({
method: 'POST',
url,
data: {body},
})
return data
} catch (error) {
console.error('Could not parse query', error)
throw error
}
}

75
ui/src/ifql/ast/walker.ts Normal file
View File

@ -0,0 +1,75 @@
// Texas Ranger
import _ from 'lodash'
interface Expression {
expression: object
}
interface AST {
body: Expression[]
}
export default class Walker {
private ast: AST
constructor(ast) {
this.ast = ast
}
public get functions() {
return this.buildFuncNodes(this.walk(this.baseExpression))
}
private reduceArgs = args => {
if (!args) {
return []
}
return args.reduce(
(acc, arg) => [...acc, ...this.getProperties(arg.properties)],
[]
)
}
private walk = currentNode => {
if (_.isEmpty(currentNode)) {
return []
}
let name
let args
if (currentNode.call) {
name = currentNode.call.callee.name
args = currentNode.call.arguments
return [...this.walk(currentNode.argument), {name, args}]
}
name = currentNode.callee.name
args = currentNode.arguments
return [{name, args}]
}
private buildFuncNodes = nodes => {
return nodes.map(node => {
return {
name: node.name,
arguments: this.reduceArgs(node.args),
}
})
}
private getProperties = props => {
return props.map(prop => ({
key: prop.key.name,
value: _.get(
prop,
'value.value',
_.get(prop, 'value.location.source', '')
),
}))
}
private get baseExpression() {
return _.get(this.ast, 'body.0.expression', {})
}
}

43
ui/src/ifql/components/FuncList.tsx Normal file
View File

@ -0,0 +1,43 @@
import React, {SFC, ChangeEvent, KeyboardEvent} from 'react'
import FancyScrollbar from 'src/shared/components/FancyScrollbar'
import DropdownInput from 'src/shared/components/DropdownInput'
import FuncListItem from 'src/ifql/components/FuncListItem'
interface Props {
inputText: string
isOpen: boolean
onInputChange: (e: ChangeEvent<HTMLInputElement>) => void
onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void
onAddNode: (name: string) => void
funcs: string[]
}
const FuncList: SFC<Props> = ({
inputText,
isOpen,
onAddNode,
onKeyDown,
onInputChange,
funcs,
}) => {
return (
<ul className="dropdown-menu funcs">
<DropdownInput
buttonSize="btn-xs"
buttonColor="btn-default"
onFilterChange={onInputChange}
onFilterKeyPress={onKeyDown}
searchTerm={inputText}
/>
<FancyScrollbar autoHide={false} autoHeight={true} maxHeight={240}>
{isOpen &&
funcs.map((func, i) => (
<FuncListItem key={i} name={func} onAddNode={onAddNode} />
))}
</FancyScrollbar>
</ul>
)
}
export default FuncList

22
ui/src/ifql/components/FuncListItem.tsx Normal file
View File

@ -0,0 +1,22 @@
import React, {PureComponent} from 'react'
interface Props {
name: string
onAddNode: (name: string) => void
}
export default class FuncListItem extends PureComponent<Props> {
public render() {
const {name} = this.props
return (
<li onClick={this.handleClick} className="dropdown-item func">
<a>{name}</a>
</li>
)
}
private handleClick = () => {
this.props.onAddNode(this.props.name)
}
}

91
ui/src/ifql/components/FuncSelector.tsx Normal file
View File

@ -0,0 +1,91 @@
import React, {PureComponent, ChangeEvent, KeyboardEvent} from 'react'
import {ClickOutside} from 'src/shared/components/ClickOutside'
import FuncList from 'src/ifql/components/FuncList'
interface State {
isOpen: boolean
inputText: string
}
interface Props {
funcs: string[]
onAddNode: (name: string) => void
}
export class FuncSelector extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {
isOpen: false,
inputText: '',
}
}
public render() {
const {isOpen, inputText} = this.state
return (
<ClickOutside onClickOutside={this.handleClickOutside}>
<div className={`dropdown dashboard-switcher ${this.openClass}`}>
<button
className="btn btn-square btn-default btn-sm dropdown-toggle"
onClick={this.handleClick}
>
<span className="icon plus" />
</button>
<FuncList
inputText={inputText}
onAddNode={this.handleAddNode}
isOpen={isOpen}
funcs={this.availableFuncs}
onInputChange={this.handleInputChange}
onKeyDown={this.handleKeyDown}
/>
</div>
</ClickOutside>
)
}
private get openClass(): string {
if (this.state.isOpen) {
return 'open'
}
return ''
}
private handleAddNode = (name: string) => {
this.setState({isOpen: false})
this.props.onAddNode(name)
}
private get availableFuncs(): string[] {
return this.props.funcs.filter(f =>
f.toLowerCase().includes(this.state.inputText)
)
}
private handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
this.setState({inputText: e.target.value})
}
private handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key !== 'Escape') {
return
}
this.setState({inputText: '', isOpen: false})
}
private handleClick = () => {
this.setState({isOpen: !this.state.isOpen})
}
private handleClickOutside = () => {
this.setState({isOpen: false})
}
}
export default FuncSelector

25
ui/src/ifql/components/Node.tsx Normal file
View File

@ -0,0 +1,25 @@
import React, {SFC} from 'react'
interface Arg {
key: string
value: string
}
interface Node {
name: string
arguments: Arg[]
}
interface Props {
node: Node
}
const Node: SFC<Props> = ({node}) => {
return (
<div className="func-node">
<div>{node.name}</div>
</div>
)
}
export default Node

32
ui/src/ifql/components/TimeMachine.tsx Normal file
View File

@ -0,0 +1,32 @@
import React, {SFC} from 'react'
import FuncSelector from 'src/ifql/components/FuncSelector'
import Node from 'src/ifql/components/Node'
interface Arg {
key: string
value: string
}
interface NodeProp {
name: string
arguments: Arg[]
}
interface Props {
funcs: string[]
nodes: NodeProp[]
onAddNode: (name: string) => void
}
const TimeMachine: SFC<Props> = ({funcs, nodes, onAddNode}) => {
return (
<div>
<div className="func-node-container">
{nodes.map((n, i) => <Node key={i} node={n} />)}
<FuncSelector funcs={funcs} onAddNode={onAddNode} />
</div>
</div>
)
}
export default TimeMachine

155
ui/src/ifql/constants/index.ts Normal file
View File

@ -0,0 +1,155 @@
export const ast = {
type: 'File',
start: 0,
end: 22,
loc: {
start: {
line: 1,
column: 0,
},
end: {
line: 1,
column: 22,
},
},
program: {
type: 'Program',
start: 0,
end: 22,
loc: {
start: {
line: 1,
column: 0,
},
end: {
line: 1,
column: 22,
},
},
sourceType: 'module',
body: [
{
type: 'ExpressionStatement',
start: 0,
end: 22,
loc: {
start: {
line: 1,
column: 0,
},
end: {
line: 1,
column: 22,
},
},
expression: {
type: 'CallExpression',
start: 0,
end: 22,
loc: {
start: {
line: 1,
column: 0,
},
end: {
line: 1,
column: 22,
},
},
callee: {
type: 'Identifier',
start: 0,
end: 4,
loc: {
start: {
line: 1,
column: 0,
},
end: {
line: 1,
column: 4,
},
identifierName: 'from',
},
name: 'from',
},
arguments: [
{
type: 'ObjectExpression',
start: 5,
end: 21,
loc: {
start: {
line: 1,
column: 5,
},
end: {
line: 1,
column: 21,
},
},
properties: [
{
type: 'ObjectProperty',
start: 6,
end: 20,
loc: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 20,
},
},
method: false,
shorthand: false,
computed: false,
key: {
type: 'Identifier',
start: 6,
end: 8,
loc: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 8,
},
identifierName: 'db',
},
name: 'db',
},
value: {
type: 'StringLiteral',
start: 10,
end: 20,
loc: {
start: {
line: 1,
column: 10,
},
end: {
line: 1,
column: 20,
},
},
extra: {
rawValue: 'telegraf',
raw: 'telegraf',
},
value: 'telegraf',
},
},
],
},
],
},
},
],
directives: [],
},
}

109
ui/src/ifql/containers/IFQLPage.tsx Normal file
View File

@ -0,0 +1,109 @@
import React, {PureComponent} from 'react'
import {connect} from 'react-redux'
import TimeMachine from 'src/ifql/components/TimeMachine'
import Walker from 'src/ifql/ast/walker'
import {getSuggestions, getAST} from 'src/ifql/apis'
interface Links {
self: string
suggestions: string
ast: string
}
interface Props {
links: Links
}
interface State {
funcs: string[]
ast: object
query: string
}
export class IFQLPage extends PureComponent<Props, State> {
constructor(props) {
super(props)
this.state = {
funcs: [],
ast: null,
query: 'from(db: "telegraf") |> filter() |> range()',
}
}
public async componentDidMount() {
const {links} = this.props
const {suggestions} = links
try {
const results = await getSuggestions(suggestions)
const funcs = results.map(s => s.name)
this.setState({funcs})
} catch (error) {
console.error('Could not get function suggestions: ', error)
}
this.getASTResponse(this.state.query)
}
public render() {
const {funcs} = this.state
return (
<div className="page">
<div className="page-header">
<div className="page-header__container">
<div className="page-header__left">
<h1 className="page-header__title">Time Machine</h1>
</div>
</div>
</div>
<div className="page-contents">
<div className="container-fluid">
<TimeMachine
funcs={funcs}
nodes={this.nodes}
onAddNode={this.handleAddNode}
/>
</div>
</div>
</div>
)
}
private handleAddNode = (name: string) => {
const query = `${this.state.query} |> ${name}()`
this.getASTResponse(query)
}
private get nodes() {
const {ast} = this.state
if (!ast) {
return []
}
const walker = new Walker(ast)
return walker.functions
}
private async getASTResponse(query: string) {
const {links} = this.props
try {
const ast = await getAST({url: links.ast, body: query})
this.setState({ast, query})
} catch (error) {
console.error('Could not parse AST', error)
}
}
}
const mapStateToProps = ({links}) => {
return {links: links.ifql}
}
export default connect(mapStateToProps, null)(IFQLPage)

3
ui/src/ifql/index.ts Normal file
View File

@ -0,0 +1,3 @@
import IFQLPage from 'src/ifql/containers/IFQLPage'
export {IFQLPage}

120
ui/src/index.js → ui/src/index.tsx
View File

@ -1,6 +1,6 @@
import 'babel-polyfill'
import React from 'react'
import React, {PureComponent} from 'react'
import {render} from 'react-dom'
import {Provider} from 'react-redux'
import {Router, Route, useRouterHistory} from 'react-router'
@ -32,26 +32,34 @@ import {
} from 'src/kapacitor'
import {AdminChronografPage, AdminInfluxDBPage} from 'src/admin'
import {SourcePage, ManageSources} from 'src/sources'
import NotFound from 'shared/components/NotFound'
import {IFQLPage} from 'src/ifql/index'
import NotFound from 'src/shared/components/NotFound'
import {getLinksAsync} from 'shared/actions/links'
import {getMeAsync} from 'shared/actions/auth'
import {getLinksAsync} from 'src/shared/actions/links'
import {getMeAsync} from 'src/shared/actions/auth'
import {disablePresentationMode} from 'shared/actions/app'
import {errorThrown} from 'shared/actions/errors'
import {notify} from 'shared/actions/notifications'
import {disablePresentationMode} from 'src/shared/actions/app'
import {errorThrown} from 'src/shared/actions/errors'
import {notify} from 'src/shared/actions/notifications'
import 'src/style/chronograf.scss'
import {HEARTBEAT_INTERVAL} from 'shared/constants'
import {HEARTBEAT_INTERVAL} from 'src/shared/constants'
const errorsQueue = []
const rootNode = document.getElementById('react-root')
declare global {
interface Window {
basepath: string
}
}
// Older method used for pre-IE 11 compatibility
const basepath = rootNode.getAttribute('data-basepath') || ''
window.basepath = basepath
const browserHistory = useRouterHistory(createHistory)({
basename: basepath, // this is written in when available by the URL prefixer middleware
})
@ -73,14 +81,22 @@ window.addEventListener('keyup', event => {
const history = syncHistoryWithStore(browserHistory, store)
const Root = React.createClass({
getInitialState() {
return {
interface State {
ready: boolean
}
class Root extends PureComponent<{}, State> {
private getLinks = bindActionCreators(getLinksAsync, dispatch)
private getMe = bindActionCreators(getMeAsync, dispatch)
constructor(props) {
super(props)
this.state = {
ready: false,
}
},
}
async componentWillMount() {
public async componentWillMount() {
this.flushErrorsQueue()
try {
@ -90,45 +106,10 @@ const Root = React.createClass({
} catch (error) {
dispatch(errorThrown(error))
}
},
}
getLinks: bindActionCreators(getLinksAsync, dispatch),
getMe: bindActionCreators(getMeAsync, dispatch),
async checkAuth() {
try {
await this.performHeartbeat({shouldResetMe: true})
} catch (error) {
dispatch(errorThrown(error))
}
},
async performHeartbeat({shouldResetMe = false} = {}) {
await this.getMe({shouldResetMe})
setTimeout(() => {
if (store.getState().auth.me !== null) {
this.performHeartbeat()
}
}, HEARTBEAT_INTERVAL)
},
flushErrorsQueue() {
if (errorsQueue.length) {
errorsQueue.forEach(error => {
if (typeof error === 'object') {
dispatch(notify(error))
} else {
dispatch(errorThrown({status: 0, auth: null}, error, 'warning'))
}
})
}
},
render() {
return !this.state.ready ? ( // eslint-disable-line no-negated-condition
<div className="page-spinner" />
) : (
public render() {
return this.state.ready ? (
<Provider store={store}>
<Router history={history}>
<Route path="/" component={UserIsAuthenticated(CheckSources)} />
@ -163,14 +144,47 @@ const Root = React.createClass({
<Route path="manage-sources" component={ManageSources} />
<Route path="manage-sources/new" component={SourcePage} />
<Route path="manage-sources/:id/edit" component={SourcePage} />
<Route path="ifql" component={IFQLPage} />
</Route>
</Route>
<Route path="*" component={NotFound} />
</Router>
</Provider>
) : (
<div className="page-spinner" />
)
},
})
}
private async performHeartbeat({shouldResetMe = false} = {}) {
await this.getMe({shouldResetMe})
setTimeout(() => {
if (store.getState().auth.me !== null) {
this.performHeartbeat()
}
}, HEARTBEAT_INTERVAL)
}
private flushErrorsQueue() {
if (errorsQueue.length) {
errorsQueue.forEach(error => {
if (typeof error === 'object') {
dispatch(notify(error))
} else {
dispatch(errorThrown({status: 0, auth: null}, error, 'warning'))
}
})
}
}
private async checkAuth() {
try {
await this.performHeartbeat({shouldResetMe: true})
} catch (error) {
dispatch(errorThrown(error))
}
}
}
if (rootNode) {
render(<Root />, rootNode)

2
ui/src/shared/apis/metaQuery.js
View File

@ -1,4 +1,4 @@
import AJAX from 'utils/ajax'
import AJAX from 'src/utils/ajax'
import _ from 'lodash'
import {buildInfluxUrl, proxy} from 'utils/queryUrlGenerator'

28
ui/src/shared/components/ClickOutside.tsx Normal file
View File

@ -0,0 +1,28 @@
import React, {PureComponent, ReactElement} from 'react'
import ReactDOM from 'react-dom'
interface Props {
children: ReactElement<any>
onClickOutside: () => void
}
export class ClickOutside extends PureComponent<Props> {
public componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true)
}
public componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true)
}
public render() {
return React.Children.only(this.props.children)
}
private handleClickOutside = e => {
const domNode = ReactDOM.findDOMNode(this)
if (!domNode || !domNode.contains(e.target)) {
this.props.onClickOutside()
}
}
}

30
ui/src/shared/components/DropdownInput.js → ui/src/shared/components/DropdownInput.tsx
View File

@ -1,9 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
import React, {SFC, ChangeEvent, KeyboardEvent} from 'react'
const disabledClass = disabled => (disabled ? ' disabled' : '')
const DropdownInput = ({
type OnFilterChangeHandler = (e: ChangeEvent<HTMLInputElement>) => void
type OnFilterKeyPress = (e: KeyboardEvent<HTMLInputElement>) => void
interface Props {
searchTerm: string
buttonSize: string
buttonColor: string
toggleStyle?: object
disabled?: boolean
onFilterChange: OnFilterChangeHandler
onFilterKeyPress: OnFilterKeyPress
}
const DropdownInput: SFC<Props> = ({
searchTerm,
buttonSize,
buttonColor,
@ -33,15 +45,3 @@ const DropdownInput = ({
)
export default DropdownInput
const {bool, func, shape, string} = PropTypes
DropdownInput.propTypes = {
searchTerm: string,
buttonSize: string,
buttonColor: string,
toggleStyle: shape({}),
disabled: bool,
onFilterChange: func.isRequired,
onFilterKeyPress: func.isRequired,
}

1
ui/src/shared/components/FeatureFlag.tsx
View File

@ -1,6 +1,7 @@
import {SFC} from 'react'
interface Props {
name?: string
children?: any
}

11
ui/src/side_nav/containers/SideNav.tsx
View File

@ -5,6 +5,8 @@ import {connect} from 'react-redux'
import Authorized, {ADMIN_ROLE} from 'src/auth/Authorized'
import UserNavBlock from 'src/side_nav/components/UserNavBlock'
import FeatureFlag from 'src/shared/components/FeatureFlag'
import {
NavBlock,
NavHeader,
@ -139,6 +141,15 @@ class SideNav extends PureComponent<Props> {
sourcePrefix={sourcePrefix}
/>
) : null}
<FeatureFlag name="time-machine">
<NavBlock
icon="cog-thick"
link={`${sourcePrefix}/ifql`}
location={location}
>
<NavHeader link={`${sourcePrefix}/ifql`} title="IFQL Builder" />
</NavBlock>
</FeatureFlag>
</nav>
)
}

6
ui/src/status/apis/index.js → ui/src/status/apis/index.ts
View File

@ -1,4 +1,6 @@
import AJAX from 'utils/ajax'
import AJAX from 'src/utils/ajax'
const excludeBasepath = true // don't prefix route of external link with basepath/
export const fetchJSONFeed = url =>
AJAX(
@ -9,5 +11,5 @@ export const fetchJSONFeed = url =>
// https://stackoverflow.com/questions/22968406/how-to-skip-the-options-preflight-request-in-angularjs
headers: {'Content-Type': 'text/plain; charset=UTF-8'},
},
{excludeBasepath: true} // don't prefix route of external link with basepath
excludeBasepath // don't prefix route of external link with basepath
)

4
ui/src/style/chronograf.scss
View File

@ -71,6 +71,7 @@
@import 'components/table-graph';
@import 'components/threshold-controls';
@import 'components/kapacitor-logs-table';
@import 'components/func-node.scss';
// Pages
@import 'pages/config-endpoints';
@ -85,3 +86,6 @@
// TODO
@import 'unsorted';
// IFQL - Time Machine
@import 'components/funcs-button';

19
ui/src/style/components/func-node.scss Normal file
View File

@ -0,0 +1,19 @@
.func-node-container {
display: inline-flex;
flex-direction: column;
}
.func-node {
background: #252b35;
border-radius: $radius-small;
padding: 10px;
width: auto;
display: flex;
flex-direction: column;
color: $ix-text-default;
text-transform: uppercase;
margin: $ix-marg-a;
font-family: $ix-text-font;
font-weight: 500;
cursor: pointer;
}

3
ui/src/style/components/funcs-button.scss Normal file
View File

@ -0,0 +1,3 @@
.dropdown-item.func {
text-transform: uppercase;
}

26
ui/src/utils/ajax.js → ui/src/utils/ajax.ts
View File

@ -24,6 +24,7 @@ const generateResponseWithLinks = (response, newLinks) => {
me: meLink,
config,
environment,
ifql,
} = newLinks
return {
@ -37,12 +38,31 @@ const generateResponseWithLinks = (response, newLinks) => {
meLink,
config,
environment,
ifql,
}
}
interface RequestParams {
url: string
resource?: string | null
id?: string | null
method?: string
data?: object
params?: object
headers?: object
}
const AJAX = async (
{url, resource, id, method = 'GET', data = {}, params = {}, headers = {}},
{excludeBasepath} = {}
{
url,
resource = null,
id = null,
method = 'GET',
data = {},
params = {},
headers = {},
}: RequestParams,
excludeBasepath = false
) => {
try {
if (!links) {
@ -81,7 +101,7 @@ export const getAJAX = async url => {
try {
return await axios({
method: 'GET',
url: addBasepath(url),
url: addBasepath(url, false),
})
} catch (error) {
console.error(error)

20
ui/test/ifql/apis/ifql.test.ts Normal file
View File

@ -0,0 +1,20 @@
import {getSuggestions} from 'src/ifql/apis'
import AJAX from 'src/utils/ajax'
jest.mock('src/utils/ajax', () => require('mocks/utils/ajax'))
describe('IFQL.Apis', () => {
afterEach(() => {
jest.clearAllMocks()
})
describe('getSuggestions', () => {
it('is called with the expected body', () => {
const url = '/chronograf/v1/suggestions'
getSuggestions(url)
expect(AJAX).toHaveBeenCalledWith({
url,
})
})
})
})

453
ui/test/ifql/ast/complex.ts Normal file
View File

@ -0,0 +1,453 @@
export default {
type: 'Program',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 91,
},
source:
'from(db: "telegraf") |> filter(fn: (r) => r["_measurement"] == "cpu") |> range(start: -1m)',
},
body: [
{
type: 'ExpressionStatement',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 91,
},
source:
'from(db: "telegraf") |> filter(fn: (r) => r["_measurement"] == "cpu") |> range(start: -1m)',
},
expression: {
type: 'PipeExpression',
location: {
start: {
line: 1,
column: 71,
},
end: {
line: 1,
column: 91,
},
source: '|> range(start: -1m)',
},
argument: {
type: 'PipeExpression',
location: {
start: {
line: 1,
column: 22,
},
end: {
line: 1,
column: 70,
},
source: '|> filter(fn: (r) => r["_measurement"] == "cpu")',
},
argument: {
type: 'CallExpression',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 21,
},
source: 'from(db: "telegraf")',
},
callee: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 5,
},
source: 'from',
},
name: 'from',
},
arguments: [
{
type: 'ObjectExpression',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 20,
},
source: 'db: "telegraf"',
},
properties: [
{
type: 'Property',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 20,
},
source: 'db: "telegraf"',
},
key: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 8,
},
source: 'db',
},
name: 'db',
},
value: {
type: 'StringLiteral',
location: {
start: {
line: 1,
column: 10,
},
end: {
line: 1,
column: 20,
},
source: '"telegraf"',
},
value: 'telegraf',
},
},
],
},
],
},
call: {
type: 'CallExpression',
location: {
start: {
line: 1,
column: 25,
},
end: {
line: 1,
column: 70,
},
source: 'filter(fn: (r) => r["_measurement"] == "cpu")',
},
callee: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 25,
},
end: {
line: 1,
column: 31,
},
source: 'filter',
},
name: 'filter',
},
arguments: [
{
type: 'ObjectExpression',
location: {
start: {
line: 1,
column: 32,
},
end: {
line: 1,
column: 69,
},
source: 'fn: (r) => r["_measurement"] == "cpu"',
},
properties: [
{
type: 'Property',
location: {
start: {
line: 1,
column: 32,
},
end: {
line: 1,
column: 69,
},
source: 'fn: (r) => r["_measurement"] == "cpu"',
},
key: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 32,
},
end: {
line: 1,
column: 34,
},
source: 'fn',
},
name: 'fn',
},
value: {
type: 'ArrowFunctionExpression',
location: {
start: {
line: 1,
column: 36,
},
end: {
line: 1,
column: 69,
},
source: '(r) => r["_measurement"] == "cpu"',
},
params: [
{
type: 'Property',
location: {
start: {
line: 1,
column: 37,
},
end: {
line: 1,
column: 38,
},
source: 'r',
},
key: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 37,
},
end: {
line: 1,
column: 38,
},
source: 'r',
},
name: 'r',
},
value: null,
},
],
body: {
type: 'BinaryExpression',
location: {
start: {
line: 1,
column: 43,
},
end: {
line: 1,
column: 69,
},
source: 'r["_measurement"] == "cpu"',
},
operator: '==',
left: {
type: 'MemberExpression',
location: {
start: {
line: 1,
column: 43,
},
end: {
line: 1,
column: 61,
},
source: 'r["_measurement"] ',
},
object: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 43,
},
end: {
line: 1,
column: 44,
},
source: 'r',
},
name: 'r',
},
property: {
type: 'StringLiteral',
location: {
start: {
line: 1,
column: 45,
},
end: {
line: 1,
column: 59,
},
source: '"_measurement"',
},
value: '_measurement',
},
},
right: {
type: 'StringLiteral',
location: {
start: {
line: 1,
column: 64,
},
end: {
line: 1,
column: 69,
},
source: '"cpu"',
},
value: 'cpu',
},
},
},
},
],
},
],
},
},
call: {
type: 'CallExpression',
location: {
start: {
line: 1,
column: 74,
},
end: {
line: 1,
column: 91,
},
source: 'range(start: -1m)',
},
callee: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 74,
},
end: {
line: 1,
column: 79,
},
source: 'range',
},
name: 'range',
},
arguments: [
{
type: 'ObjectExpression',
location: {
start: {
line: 1,
column: 80,
},
end: {
line: 1,
column: 90,
},
source: 'start: -1m',
},
properties: [
{
type: 'Property',
location: {
start: {
line: 1,
column: 80,
},
end: {
line: 1,
column: 90,
},
source: 'start: -1m',
},
key: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 80,
},
end: {
line: 1,
column: 85,
},
source: 'start',
},
name: 'start',
},
value: {
type: 'UnaryExpression',
location: {
start: {
line: 1,
column: 87,
},
end: {
line: 1,
column: 90,
},
source: '-1m',
},
operator: '-',
argument: {
type: 'DurationLiteral',
location: {
start: {
line: 1,
column: 88,
},
end: {
line: 1,
column: 90,
},
source: '1m',
},
value: '1m0s',
},
},
},
],
},
],
},
},
},
],
}

121
ui/test/ifql/ast/from.ts Normal file
View File

@ -0,0 +1,121 @@
export default {
type: 'Program',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 21,
},
source: 'from(db: "telegraf")',
},
body: [
{
type: 'ExpressionStatement',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 21,
},
source: 'from(db: "telegraf")',
},
expression: {
type: 'CallExpression',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 21,
},
source: 'from(db: "telegraf")',
},
callee: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 1,
},
end: {
line: 1,
column: 5,
},
source: 'from',
},
name: 'from',
},
arguments: [
{
type: 'ObjectExpression',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 20,
},
source: 'db: "telegraf"',
},
properties: [
{
type: 'Property',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 20,
},
source: 'db: "telegraf"',
},
key: {
type: 'Identifier',
location: {
start: {
line: 1,
column: 6,
},
end: {
line: 1,
column: 8,
},
source: 'db',
},
name: 'db',
},
value: {
type: 'StringLiteral',
location: {
start: {
line: 1,
column: 10,
},
end: {
line: 1,
column: 20,
},
source: '"telegraf"',
},
value: 'telegraf',
},
},
],
},
],
},
},
],
}

49
ui/test/ifql/ast/walker.test.ts Normal file
View File

@ -0,0 +1,49 @@
import Walker from 'src/ifql/ast/walker'
import From from 'test/ifql/ast/from'
import Complex from 'test/ifql/ast/complex'
describe('IFQL.AST.Walker', () => {
describe('Walker#functions', () => {
describe('simple example', () => {
it('returns a flattened ordered list of from and its arguments', () => {
const walker = new Walker(From)
expect(walker.functions).toEqual([
{
name: 'from',
arguments: [
{
key: 'db',
value: 'telegraf',
},
],
},
])
})
})
describe('complex example', () => {
it('returns a flattened ordered list of all funcs and their arguments', () => {
const walker = new Walker(Complex)
expect(walker.functions).toEqual([
{
name: 'from',
arguments: [{key: 'db', value: 'telegraf'}],
},
{
name: 'filter',
arguments: [
{
key: 'fn',
value: '(r) => r["_measurement"] == "cpu"',
},
],
},
{
name: 'range',
arguments: [{key: 'start', value: '-1m'}],
},
])
})
})
})
})

137
ui/test/ifql/components/FuncSelector.test.tsx Normal file
View File

@ -0,0 +1,137 @@
import React from 'react'
import {shallow} from 'enzyme'
import {FuncSelector} from 'src/ifql/components/FuncSelector'
import DropdownInput from 'src/shared/components/DropdownInput'
import FuncListItem from 'src/ifql/components/FuncListItem'
import FuncList from 'src/ifql/components/FuncList'
const setup = (override = {}) => {
const props = {
funcs: ['f1', 'f2'],
onAddNode: () => {},
...override,
}
const wrapper = shallow(<FuncSelector {...props} />)
return {
wrapper,
}
}
describe('IFQL.Components.FuncsButton', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
})
describe('the function list', () => {
it('does not render the list of funcs by default', () => {
const {wrapper} = setup()
const list = wrapper.find({'data-test': 'func-li'})
expect(list.exists()).toBe(false)
})
})
})
describe('user interraction', () => {
describe('clicking the add function button', () => {
it('displays the list of functions', () => {
const {wrapper} = setup()
const dropdownButton = wrapper.find('button')
dropdownButton.simulate('click')
const list = wrapper
.find(FuncList)
.dive()
.find(FuncListItem)
const first = list.first().dive()
const last = list.last().dive()
expect(list.length).toBe(2)
expect(first.text()).toBe('f1')
expect(last.text()).toBe('f2')
})
})
describe('filtering the list', () => {
it('displays the filtered funcs', () => {
const {wrapper} = setup()
const dropdownButton = wrapper.find('button')
dropdownButton.simulate('click')
let list = wrapper
.find(FuncList)
.dive()
.find(FuncListItem)
const first = list.first().dive()
const last = list.last().dive()
expect(list.length).toBe(2)
expect(first.text()).toBe('f1')
expect(last.text()).toBe('f2')
const input = wrapper
.find(FuncList)
.dive()
.find(DropdownInput)
.dive()
.find('input')
input.simulate('change', {target: {value: '2'}})
wrapper.update()
list = wrapper
.find(FuncList)
.dive()
.find(FuncListItem)
const func = list.first().dive()
expect(list.length).toBe(1)
expect(func.text()).toBe('f2')
})
})
describe('exiting the list', () => {
it('closes when ESC is pressed', () => {
const {wrapper} = setup()
const dropdownButton = wrapper.find('button')
dropdownButton.simulate('click')
let list = wrapper
.find(FuncList)
.dive()
.find(FuncListItem)
expect(list.exists()).toBe(true)
const input = wrapper
.find(FuncList)
.dive()
.find(DropdownInput)
.dive()
.find('input')
input.simulate('keyDown', {key: 'Escape'})
wrapper.update()
list = wrapper
.find(FuncList)
.dive()
.find(FuncListItem)
expect(list.exists()).toBe(false)
})
})
})
})

27
ui/test/ifql/components/TimeMachine.test.tsx Normal file
View File

@ -0,0 +1,27 @@
import React from 'react'
import {shallow} from 'enzyme'
import TimeMachine from 'src/ifql/components/TimeMachine'
const setup = () => {
const props = {
funcs: [],
nodes: [],
onAddNode: () => {},
}
const wrapper = shallow(<TimeMachine {...props} />)
return {
wrapper,
}
}
describe('IFQL.Components.TimeMachine', () => {
describe('rendering', () => {
it('renders', () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
})
})
})

45
ui/test/ifql/containers/IFQLPage.test.tsx Normal file
View File

@ -0,0 +1,45 @@
import React from 'react'
import {shallow} from 'enzyme'
import {IFQLPage} from 'src/ifql/containers/IFQLPage'
import TimeMachine from 'src/ifql/components/TimeMachine'
jest.mock('src/ifql/apis', () => require('mocks/ifql/apis'))
const setup = () => {
const props = {
links: {
self: '',
suggestions: '',
ast: '',
},
}
const wrapper = shallow(<IFQLPage {...props} />)
return {
wrapper,
}
}
describe('IFQL.Containers.IFQLPage', () => {
afterEach(() => {
jest.clearAllMocks()
})
describe('rendering', () => {
it('renders the page', async () => {
const {wrapper} = setup()
expect(wrapper.exists()).toBe(true)
})
it('renders the <TimeMachine/>', () => {
const {wrapper} = setup()
const timeMachine = wrapper.find(TimeMachine)
expect(timeMachine.exists()).toBe(true)
})
})
})

12
ui/tsconfig.json
View File

@ -1,6 +1,14 @@
{
"compilerOptions": {
"types": ["node", "chai", "lodash", "enzyme", "react", "prop-types", "jest"],
"types": [
"node",
"chai",
"lodash",
"enzyme",
"react",
"prop-types",
"jest"
],
"target": "es6",
"module": "es2015",
"moduleResolution": "node",
@ -25,7 +33,7 @@
"checkJs": false,
"sourceMap": true,
"baseUrl": "./",
"rootDir": "./src",
"rootDir": "./src"
},
"exclude": ["./assets/*", "./build/*", "./node_modules/*"]
}

2
ui/webpack/dev.config.js
View File

@ -38,7 +38,7 @@ module.exports = {
cache: true,
devtool: 'inline-eval-cheap-source-map',
entry: {
app: path.resolve(__dirname, '..', 'src', 'index.js'),
app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
},
output: {
publicPath: '/',

16
ui/webpack/prod.config.js
View File

@ -25,7 +25,7 @@ const config = {
bail: true,
devtool: false,
entry: {
app: path.resolve(__dirname, '..', 'src', 'index.js'),
app: path.resolve(__dirname, '..', 'src', 'index.tsx'),
vendor: Object.keys(dependencies),
},
output: {
@ -167,16 +167,10 @@ const config = {
function() {
/* Webpack does not exit with non-zero status if error. */
this.plugin('done', function(stats) {
if (
stats.compilation.errors &&
stats.compilation.errors.length &&
process.argv.indexOf('--watch') == -1
) {
console.log(
stats.compilation.errors.toString({
colors: true,
})
)
const {compilation: {errors}} = stats
if (errors && errors.length) {
errors.forEach(err => console.log(err))
process.exit(1)
}
})