bblfsh / web

Web client for Babelfish server

Babelfish web

Web client for Babelfish server.

It's a user-friendly tool for testing and studying how Babelfish parses source code.

Installation

Babelfish server (v2.9.1 or newer) is required. If you don't have it running please read the getting started guide. You will learn how to use and deploy a bblfsh server.

Recommended way (using Docker)

docker run --privileged -d -p 9432:9432 --name bblfsh bblfsh/bblfshd:latest-drivers
docker run -p 8080:8080 --link bblfsh bblfsh/web -bblfsh-addr bblfsh:9432

When the server starts, the web client will be available on http://localhost:8080

Please read the getting started guide on how to use and deploy the bblfshd server, how to install drivers, etc.

Standalone

If you don't want to run the web client using our Docker image you can download a binary from the releases page and run it instead:

./bblfsh-web -bblfsh-addr <bblfsh-server-addr>

You can also configure the server in debug mode passing --debug extra flag, and the logging level with the LOG_LEVEL environment value:

LOG_LEVEL={debug,info,warning error} ./bblfsh-web -bblfsh-addr <bblfsh-server-addr> --debug

If none are set, its default values will be logging level info, and server in ReleaseMode.

Development

See CONTRIBUTING.md. There is information about the application architecture and how to build from sources.

Contributing

Please take a look at CONTRIBUTING file to see how to contribute in this project.

License

GPLv3, see LICENSE.

web's Issues

Try to call bblfsh server from the browser instead of from the backend API

As reported by @dennwc via Slack, it might be interesting the new official beta:
https://github.com/grpc/grpc-web

It might worth to investigate the possibility of calling bblfsh from the browser, that was already discarded in the past for undocumented reasons.

Rename dashboard to playground

A dashboard shows metrics of the current status of a server, e.g. the Kubernetes Dashboard.

A playground allows a user to interact with a service without having to install anything first, e.g. Go playground or the Google API Playground

This repo implements a playground, and as such should be renamed to bblfs/playground.

Set version variable automatically during release

Do like it works in https://github.com/bblfsh/bblfshd

Add configuration in Dashboard for the bblfsh server to use

The URL of the bblfsh server to use to parse the files need to be configurable.

This configuration would need to allow the user to select the default url.

Do not "auto-parse" when user changes the language

@smeruelo suggested irl:
Do not "auto-parse" when user changes the language, otherwise it rises errors that can be expected but annoying.

steps to reproduce the errors:

1. go to the dashboard,
2. change the language -> annoying errors!!!

or...

1. go to the dashboard,
2. write python code,
3. change the language to Python -> everything goes good
4. change the language to Java again -> annoying errors!!!

Fix dashboard url in project description

Dashboard does not work with https, so the link should be fixed because it points to https://dashboard.bblf.sh -> 443: Connection timed out

Highlight last character (python)

Happens only for python. For java works fine.

When I hover on node it doesn't highlight last character (for example fizzbuz instead of fizzbuzz)

Performance error when clicking in some tokens

as reported by @vmarkovtsev vía Slack:

I found a bug. Open fizzbuzz.py and click on "return" in "return 'Buzz'". It freezes and kills the tab

Diagnostic:

There is a performance error when clicking in some tokens, that causes a browser tab freeze.

given the following python sourcecode:

def fizzbuzz(n):
    if false:
        return 'Fizz'
    else:
        return 'FizzBuzz'

click in the last return -> small freeze
click in FizzBuzz -> looooong freeze

Quick changes

• Decrease font size a 20%
• Move the "RUN Parser" to tthe right of screen
• Add more example to the example combo:
• Use the same font in the text are and the tree: http://sourcefoundry.org/hack/
• Remove the "Driver code" label from the octocat icon, and put "Driver repository" as an alt desc
• Changes the example with the following files:

Name: fizzbuzz.py

def fizzbuzz(n):

    if n % 3 == 0 and n % 5 == 0:
        return 'FizzBuzz'
    elif n % 3 == 0:
        return 'Fizz'
    elif n % 5 == 0:
        return 'Buzz'
    else:
        return str(n)

print "\n".join(fizzbuzz(n) for n in xrange(1, 21))

Name: classdef.py
https://github.com/bblfsh/python-driver/blob/master/tests/classdef.py.source

Name: hello.java

// hello.java
import java.io.*;
import javax.servlet.*;

public class Hello extends GenericServlet {
    public void service(final ServletRequest request, final ServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/html");
        final PrintWriter pw = response.getWriter();
        try {
            pw.println("Hello, world!");
        } finally {
            pw.close();
        }
    }
}

Name: swap.java

public class SwapElementsExample {
 
        public static void main(String[] args) {
               
                int num1 = 10;
                int num2 = 20;
               
                System.out.println("Before Swapping");
                System.out.println("Value of num1 is :" + num1);
                System.out.println("Value of num2 is :" +num2);
               
                //swap the value
                swap(num1, num2);
        }
 
        private static void swap(int num1, int num2) {
               
                int temp = num1;
                num1 = num2;
                num2 = temp;
               
                System.out.println("After Swapping");
                System.out.println("Value of num1 is :" + num1);
                System.out.println("Value of num2 is :" +num2);
               
        }
}

Add tree-like visualization

Hi,
I used dashboard a bit and found that it's still hard to understand.
When you use UAST from bblfsh as text - it's really verbose (even if you hide some attributes of nodes).

• it's hard to read structure of code
  It will be really great to have tree visualization, so the structure will be easily readable + show attributes of a node by click (or just pointing by mouse, or show token always - everything else optionally, or etc.).
  Ex1: https://resources.jointjs.com/demos/javascript-ast
  Ex2: http://vpyast.appspot.com/

Load GitHub gist URLs

@Serabe, weren't you working on this feature? Do you have a local branch on it or so? Thank you!

Tests for non-success cases print errors in console

We have some console.error statements in code (for example in api).
When we run tests for non-success cases you can see errors in report. It's confusing.
We need to find a way how to avoid it. For now I see 3 options:

1. remove console.error from code
2. mock console in tests
3. use error sender wrapper in code (it will be console.error in prod/dev for now and noop-func in tests)

[Release v0.4.0] Prepare it

required by https://github.com/src-d/backlog/issues/1074

• Update main.VERSION to v0.4.0 => we moved to tagging by Makefile and don't keep version in code (same as other src-d projects do)
• Release the latest version once the subtasks of https://github.com/src-d/backlog/issues/1074 are checked
• Ensure the latest tag at dockerhub points to the new v0.4.0 image tag #65 (blocked by src-d/ci#44 src-d/ci#47)
• Deploy publicly

/cc @marnovo

Latest dashboard fails to communicate with latest server

In a freshly installed macbook I'm running these commands (following the documentation) and seeing errors.

> docker run -d --name bblfshd --privileged -p 9432:9432 bblfsh/bblfshd
81f1bb5453b9074185ace4afd2c34a2c7e5ea74931ee507bc08b2999565ecdb9

> docker exec -it bblfshd bblfshctl driver install --all
Installing python driver language from "docker://bblfsh/python-driver:latest"... Done
Installing java driver language from "docker://bblfsh/java-driver:latest"... Done

> docker run -p 8080:80 --link bblfshd bblfsh/dashboard -bblfsh-addr bblfshd:9432
time="2017-11-10T17:09:27Z" level=info msg="starting REST server" addr=":80"

After running these commands my docker client has two images:

> docker images -a
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
bblfsh/bblfshd      latest              7379a3cad7ac        2 weeks ago         170MB
bblfsh/dashboard    latest              c301a8651163        7 weeks ago         25.7MB

Then when I try to access the local dashboard running on localhost:8080 and click on "run parser" I get this error:

Error
error parsing UAST: rpc error: code = Internal desc = grpc: failed to unmarshal the received message proto: wrong wireType = 0 for field InternalType

More logs below:

Logs from the dashboard:

time="2017-11-10T17:09:27Z" level=info msg="starting REST server" addr=":80"
time="2017-11-10T17:10:01Z" level=info msg="[GIN] 2017/11/10 - 17:10:01 | 200 |     388.962µs |      172.17.0.1 | GET      /api/drivers"
time="2017-11-10T17:10:04Z" level=info msg="[GIN] 2017/11/10 - 17:10:04 | 500 |  1.576631479s |      172.17.0.1 | POST     /api/parse"

Logs from bblfhsd:

time="2017-11-10T17:07:36Z" level=info msg="bblfshd version: v2.1.2 (build: 2017-10-26T10:53:53+0000)"
time="2017-11-10T17:07:36Z" level=info msg="initializing runtime at /var/lib/bblfshd"
time="2017-11-10T17:07:36Z" level=info msg="control server listening in /var/run/bblfshctl.sock (unix)"
time="2017-11-10T17:07:36Z" level=info msg="server listening in 0.0.0.0:9432 (tcp)"
time="2017-11-10T17:08:28Z" level=info msg="driver python installed "bblfsh/python-driver:latest""
time="2017-11-10T17:08:54Z" level=info msg="driver java installed "bblfsh/java-driver:latest""
time="2017-11-10T17:10:03Z" level=info msg="java-driver version: dev-8a99b6f (build: 2017-11-10T16:21:02Z)" id=01bykehtdhjd4jsytrqt8mkk1p language=java
time="2017-11-10T17:10:03Z" level=info msg="server listening in /tmp/rpc.sock (unix)" id=01bykehtdhjd4jsytrqt8mkk1p language=java
time="2017-11-10T17:10:04Z" level=info msg="new driver instance started bblfsh/java-driver:latest (01bykehtdhjd4jsytrqt8mkk1p)"

Suggestion: sort the keys of a node

This is smth we discussed with Ricardo and I forgot to register.

It would be much better to sort the keys of each node so that children always goes the last. Currently, the order is different and in case of nodes with many nested children, understanding which record goes to which node is difficult.

Regression: source code isn't highlighted after gist load

Most probably it got broken during redux refactoring.

Improve the documentation and readme

We should explain the architecture, expand the README and add some screenshots.

roles are shown as number and not text

We should have a mapping between role numbers and strings

Allow xpath searches

We should allow xpath queries at the dashboard to be able to test and debug queries. A nice to have could be having a small xpath editor, to help the creation.

Requires having a client-go, still in planning phase.

/cc @abeaumont @juanjux @manucorporat

UX: is hard to figure out for a newbiew what to write on the "UAST query" field

Is hard to figure out for a newbiew what to write on the "UAST query" field, maybe we can put as placeholder and very simple query or similar, more than just link the documentaiton.

Recover driver list from gRPC and not have a fixed list

We should recover the list of driver installed on the server and the versions, instead of the hardcoded list.

Add tests for go handlers

right now we almost don't test anything on a server side

Share a node with a link

We will be useful if we can share a node, to easy address to other people something. As well for lines, for line we can use the GitHub format.

bblfsh/dashboard:latest tag is not updated when released a new tag

It seems that ci/Makefile.main docker-push rule does not update the :latest tag when a new tag is updated, does it?

If that's true, it's a pity because when locally installing the dashboard, it is used the bblfsh/dashboard:latest tag from DockerHub

blocked by src-d/ci#44

Improve accessibility of node hover color

The light-gray hover whenever you hover a node block on the UAST panel on the right is hard to notice in some screens (and/or for some visually impaired people), in contrast to the more obvious yellow color that shows up in the left side.

A few solution ideas:

• Change the intensity of the hover color.
• Change the hover color to a different one that helps matching visually the corresponding code on the other panel (keeping both contents visible).
• Add a border element to the hovered code/node block that is highlighted.

@ricardobaeta may have more interesting solutions.

Enhance the expand nodes implementation

Investigation: compile libuast to js and use it on client instead of server side libuast

Currently, for x-path filtering we use libuast on server side. For every filter request we send all source code to the server, reparse it using bblfsh then applying filtering on server side.

Looks like we can skip most of this steps and simplify code if we would be able to compile libuast to js.

If it's possible, together with #118 we will be able to remove backend almost completely.

Regression: source code editor doesn't fill container height

You can see a difference with v0.3 when there are only a few lines of code.
Most probably got broken because of change of codemirror react library.

[feature request] Versions on page

Add the version of dashboard somewhere on the page.
Add the version of bblfsh-server with which dashboard should definitely work.

It would be really nice and useful for dashboard usage.

Everything broke spectacularly when I switched from Java to Python

I opened dashboard.bblf.sh, clicked the dropdown and selected Python. Everything has exploded:

Vertical scroll on UAST window disappear under certain right widow sizes

Vertical scroll on UAST panel disappear under certain right panel and window sizes and when UAST is quite deep. When it happens, the UAST panel can be scrolled only with the mouse wheel.

I could not reproduce it in the original https://astexplorer.net

Error with latest server version

As reported by @eiso via slack:

I just pulled the latest server and I am getting the following error when trying to parse Python code from the dashboard: error parsing UAST: rpc error: code = Unimplemented desc = unknown service gopkg.in.bblfsh.sdk.v0.protocol.ProtocolService

Provide a clear error message when bblfsh cannot be reached

When running the docker container with an unreachable bblfsh-addr option, the error message is not descriptive enough:
time="2018-01-08T15:33:28Z" level=fatal msg="error starting new server at :80: context deadline exceeded"

Provide examples for new languages

depends on issue #89 → PR #122

Bblfsh has 6 recommended drivers in beta state, according to https://doc.bblf.sh/languages.html#supported-languages

Dashboard should catch up and have at least one example of each of those by default.

Thus Golang, Ruby, PHP and JavaScript need to be added.

Shareable link to a Gist returns 404

On build from latest master, if one imports from Gist URL https://gist.github.com/bzz/cf2cc8d763bf5013f3a86d81bdb3ae8c, UAST is displayed, and "Share" btn produces a link

http://0.0.0.0:9999/bzz/cf2cc8d763bf5013f3a86d81bdb3ae8c/raw/284c8c6feec80428d1a1c6ff4cdba2c5799473c9/ParsingSucceeds.java

that, when pasted it to a new tab, results in 404 page not found page.

Is `make serve` target really working?

I tried twice and it failed, and only worked after running yarn start; I think the assets are not properly generated -> served by the api one it is ran make serve

After code modification UAST highlight wrong node

When I edit code the old tree is still there and highlight wrong node.
Should we disable highlighting or maybe all tree?

metrics from Dashboard --> Google Analytics

We need to gather Dashboard metrics on Google Analytics regarding audience (visits, time spent etc). I believe this is strongly related to @dpordomingo. Please let me know if you need further details.

Checkbox labels are unclickable

I mean "Show locations" & "Custom babelfish server" options.

Add linter & prettier in CI

To avoid accidental mistakes.

Using Gist from Github

parent #45

As a user of the dashboard I want to be able to import a github gist directly to the input (left) panel, and to share that state

It is needed to cover the following features:

• Input text to specify which gist will be loaded into the left panel,
• A share button to share the dashboard with the gist already loaded into the input panel,
• The share button will copy into the browser clipboard a shareable gist url,
• If the dashboard is accessed through a shareable gist url, the gist url will be loaded into the input text, the gist content will be loaded into the input panel, and the gist UAST will be loaded into the right panel,

The shareable url will have the following format:

https://_DASHBOARD_HOST_NAME_/gist/mcuadros/89457425a26eeb8aa787538adb68acdb/raw/5067e3a8500645a259aa45794d614e0490926a37/ace-of-equinox.md

/cc @marnovo

Add hide / show location checkbox

Add a checkbox to show / hide the location data for nodes.

It should be hidden by default.

Hovering on a Python function

I hover over "Node" and this is what I see:

There are two problems IMHO:

1. If I hover over the empty area right to "Node" then :hover is still activated. Looks like the size of the element does not match the string value.
2. The last "z" in "fizzbuzz" is not highlighted.

Add babelfish favicon before deploying.

Docker image v0.4.0 does not run

Is there an issue with the entrypoint?

$ docker run -p 8080:80 bblfsh/dashboard:v0.4.0 -bblfsh-addr localhost:8080
standard_init_linux.go:185: exec user process caused "no such file or directory"

Previous image works fine

$ docker run -p 8080:80 bblfsh/dashboard:v0.3.0 -bblfsh-addr localhost:8080
time="2018-01-05T15:09:11Z" level=info msg="starting REST server" addr=":80"

Use bblfsh go client

Now it makes requests directly using sdk.
We need to use https://github.com/bblfsh/client-go it will allow to query by x-path and later integrate other features

Hide examples if there is no driver available

If the drivers are fetched automatically from the bblfsh server (#122), and some of them are not installed, the examples for that languages should not be shown.

Create play.bblf.sh

We should have a DaaS (Dashboard as a Service) where anyone can go and play with the stateless / read-only aspects of the platform.

I propose hosting it under play.bblf.sh, where anyone can go and try to parse any code as long as it's supported by any of the available drivers.

Add binary releases to README

Now that there are binary releases for macOS and Linux it is a good idea to add it to the README as one alternative.
https://github.com/bblfsh/dashboard/releases

Request for examples

Hi,
It will be really nice to have some examples of usages of dashboard, goals, what can be done and so on.
So everybody can easily understand if it's suitable for their needs