Git Product home page Git Product logo

alice-theme-example's Introduction

Alice-LG - Your friendly looking glass

"No, no! The adventures first, explanations take such a dreadful time."
Lewis Carroll, Alice's Adventures in Wonderland & Through the Looking-Glass

Take a look at Alice-LG production examples at:

And checkout the API at:

Breaking Changes

6.0.0

With the new functional react UI, the DOMContentLoaded event can no longer be used for injecting additional content. Please use Alice.onLayoutReady(function(main) { ... }); instead.

5.1.0

The spelling of "neighbors" is now harmonized. Please update your config and replace e.g. neighbour.asn with neighbor.asn (in case of java script errors).

Explanations

Alice-LG is a BGP looking glass which gets its data from external APIs.

Currently Alice-LG supports the following APIs:

Birdwatcher

Normally you would first install the birdwatcher API directly on the machine(s) where you run BIRD on and then install Alice-LG on a seperate public facing server and point her to the afore mentioned birdwatcher API.

This project was a direct result of the RIPE IXP Tools Hackathon just prior to RIPE73 in Madrid, Spain.

Major thanks to Barry O'Donovan who built the original INEX Bird's Eye BIRD API of which Alice-LG is a spinnoff

GoBGP

Alice-LG supports direct integration with GoBGP instances using gRPC. See the configuration section for more detail.

OpenBGPD

Alice-LG supports OpenBGP via bgplgd and openbgpd-state-server.

Building Alice-LG from scratch

These examples include setting up your Go environment, if you already have set that up then you can obviously skip that

CentOS:

First add the following lines at the end of your ~/.bash_profile:

GOPATH=$HOME/go
export GOPATH
PATH=$PATH:$GOPATH/bin
export PATH

Now run:

source ~/.bash_profile

# Install frontend build dependencies
sudo yum install golang npm
sudo npm install --global yarn

mkdir -p ~/go/bin ~/go/pkg ~/go/src/github.com/alice-lg/

cd ~/go/src/github.com/alice-lg
git clone https://github.com/alice-lg/alice-lg.git

cd alice-lg
make

Your Alice-LG source will now be located at ~/go/src/github.com/alice-lg/alice-lg and your alice-LG executable should be at ~/go/src/github.com/alice-lg/alice-lg/bin/alice-lg-linux-amd64

Configuration

An example configuration can be found at etc/alice-lg/alice.example.conf.

You can copy it to any of the following locations:

etc/alice-lg/alice.conf        # local
etc/alice-lg/alice.local.conf  # local
/etc/alice-lg/alice.conf       # global

You will have to edit the configuration file as you need to point Alice-LG to the correct backend source. Multiple sources can be configured.

Birdwatcher:

[source.rs1-example-v4]
name = rs1.example.com (IPv4)
[source.rs1-example-v4.birdwatcher]
api = http://rs1.example.com:29184/
neighbors_refresh_timeout = 2
# show_last_reboot = true
# timezone = UTC
# type = single_table / multi_table
type = multi_table
# not needed for single_table
peer_table_prefix = T
pipe_protocol_prefix = M

[source.rs1-example-v6]
name = rs1.example.com (IPv6)
[source.rs1-example-v6.birdwatcher]
api = http://rs1.example.com:29186/

GoBGP:

[source.rs2-example]
name = rs2.example.com
group = AMS

[source.rs2-example.gobgp]
# Host is the IP (or DNS name) and port for the remote GoBGP daemon
host = rs2.example.com:50051
# ProcessingTimeout is a timeout in seconds configured per gRPC call to a given GoBGP daemon
processing_timeout = 300

Configure TLS with:

tls_crt = /path/to/cert
tls_common_name = "common name"

You can disable TLS with insecure = true.

OpenBGPD via openbgpd-state-server:

[source.rs-example]
name = rs-example.openbgpd-state-server

[source.rs-example.openbgpd-state-server]
api = http://rs23.example.net:29111/api

# Optional response cache time in seconds
# Default: disabled (0)
cache_ttl = 100

OpenBGPD via bgplgd:

[source.rs-example]
name = rs-example.openbgpd-bgplgd

[source.rs-example.openbgpd-bgplgd]
api = http://rs23.example.net/bgplgd

# Optional response cache time in seconds
# Default: disabled (0)
cache_ttl = 100

Running

Launch the server by running

./bin/alice-lg-linux-amd64

Customization

Alice now supports custom themes! In your alice.conf, you now can specify a theme by setting:

[theme]
path = /path/to/my/alice-theme

with the optional parameter (the "mountpoint" of the theme) url_base = /theme

You can put assets (images, fonts, javscript, css) in this folder.

Stylesheets and Javascripts are automatically included in the client's html and are served from the backend.

Alice provides early stages of an extension API, which is for now only used to modify the content of the welcome screen, by providing a javascript in your theme containing:

Alice.updateContent({
    welcome: {
        title: "My Awesome Looking Glass",
        tagline: "powered by Alice"
    }
});

A callback for running custom javascript after the base application was initialized can be installed using:

Alice.onLayoutReady(function(page) {
    // page is the layout HTML root element
});

For an example check out: https://github.com/alice-lg/alice-theme-example

Hacking

The client is a Single Page React Application. All sources are available in ui/.

Yarn is required for building the UI.

Create a fresh UI build with

cd ui/
make

This will install all dependencies with yarn install and run yarn build.

As this is a create-react-app application, react-scripts are present and you can just run a development server using yarn start.

All this available as a containerized environment:

Running docker-compose up in the ./dev will build and start the backend and run a webpack dev server for the UI.

The UI is then available on http://localhost:3000/ and on http://localhost:7340/ the backend will serve the API.

Sponsors

The development of Alice is now sponsored by

DE-CIX Logo

Many thanks go out to ECIX, where this project originated and was backed over the last two years.

Support for OpenBGPD was sponsored by the Route Server Support Foundation.

alice-theme-example's People

Contributors

annikahannig avatar tking avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Forkers

isabella232 tking

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.