dashboard

README

Go CommerciumX Dashboard

The dashboard is a data visualizer integrated into cmmx, intended to collect and visualize useful information of an CommerciumX node. It consists of two parts:

• The client visualizes the collected data.
• The server collects the data, and updates the clients.

The client's UI uses React with JSX syntax, which is validated by the ESLint linter mostly according to the Airbnb React/JSX Style Guide. The style is defined in the .eslintrc configuration file. The resources are bundled into a single bundle.js file using Webpack, which relies on the webpack.config.js. The bundled file is referenced from dashboard.html and takes part in the assets.go too. The necessary dependencies for the module bundler are gathered by Node.js.

Development and bundling

As the dashboard depends on certain NPM packages (which are not included in the go-CommerciumX repo), these need to be installed first:

$ (cd dashboard/assets && npm install)
$ (cd dashboard/assets && ./node_modules/.bin/flow-typed install)

Normally the dashboard assets are bundled into CommerciumX via go-bindata to avoid external dependencies. Rebuilding CommerciumX after each UI modification however is not feasible from a developer perspective. Instead, we can run webpack in watch mode to automatically rebundle the UI, and ask cmmx to use external assets to not rely on compiled resources:

$ (cd dashboard/assets && ./node_modules/.bin/webpack --watch)
$ cmmx --dashboard --dashboard.assets=dashboard/assets/public --vmodule=dashboard=5

To bundle up the final UI into CommerciumX, run go generate:

$ go generate ./dashboard

Static type checking

Since JavaScript doesn't provide type safety, Flow is used to check types. These are only useful during development, so at the end of the process Babel will strip them.

To take advantage of static type checking, your IDE needs to be prepared for it. In case of Atom a configuration guide can be found here: Install the Nuclide package for Flow support, making sure it installs all of its support packages by enabling Install Recommended Packages on Startup, and set the path of the flow-bin which were installed previously by npm.

For more IDE support install the linter-eslint package too, which finds the .eslintrc file, and provides real-time linting. Atom warns, that these two packages are incompatible, but they seem to work well together. For third-party library errors and auto-completion flow-typed is used.

Have fun

Webpack offers handy tools for visualizing the bundle's dependency tree and space usage.

• Generate the bundle's profile running webpack --profile --json > stats.json
• For the dependency tree go to Webpack Analyze, and import stats.json
• For the space usage go to Webpack Visualizer, and import stats.json

Documentation

Index

• Variables
• func Asset(name string) ([]byte, error)
• func AssetDir(name string) ([]string, error)
• func AssetInfo(name string) (os.FileInfo, error)
• func AssetNames() []string
• func MustAsset(name string) []byte
• func RestoreAsset(dir, name string) error
• func RestoreAssets(dir, name string) error
• type ChainMessage
• type Chart
• type ChartEntry
• type Config
• type Dashboard
  • func New(config *Config) (*Dashboard, error)
  • func (db *Dashboard) APIs() []rpc.API
  • func (db *Dashboard) Protocols() []p2p.Protocol
  • func (db *Dashboard) Start(server *p2p.Server) error
  • func (db *Dashboard) Stop() error
• type HomeMessage
• type LogsMessage
• type Message
• type NetworkMessage
• type SystemMessage
• type TxPoolMessage

Variables

var DefaultConfig = Config{
	Host:    "localhost",
	Port:    8080,
	Refresh: 3 * time.Second,
}

DefaultConfig contains default settings for the dashboard.

Functions

func Asset

func Asset(name string) ([]byte, error)

Asset loads and returns the asset for the given name. It returns an error if the asset could not be found or could not be loaded.

func AssetDir

func AssetDir(name string) ([]string, error)

AssetDir returns the file names below a certain directory embedded in the file by go-bindata. For example if you run go-bindata on data/... and data contains the following hierarchy:

data/
  foo.txt
  img/
    a.png
    b.png

then AssetDir("data") would return []string{"foo.txt", "img"} AssetDir("data/img") would return []string{"a.png", "b.png"} AssetDir("foo.txt") and AssetDir("notexist") would return an error AssetDir("") will return []string{"data"}.

func AssetInfo

func AssetInfo(name string) (os.FileInfo, error)

AssetInfo loads and returns the asset info for the given name. It returns an error if the asset could not be found or could not be loaded.

func AssetNames

func AssetNames() []string

AssetNames returns the names of the assets.

func MustAsset

func MustAsset(name string) []byte

MustAsset is like Asset but panics when Asset would return an error. It simplifies safe initialization of global variables.

func RestoreAsset

func RestoreAsset(dir, name string) error

RestoreAsset restores an asset under the given directory

func RestoreAssets

func RestoreAssets(dir, name string) error

RestoreAssets restores an asset under the given directory recursively

Types

type ChainMessage

type ChainMessage struct {
}

type Chart

type Chart struct {
	History []*ChartEntry `json:"history,omitempty"`
	New     *ChartEntry   `json:"new,omitempty"`
}

type ChartEntry

type ChartEntry struct {
	Time  time.Time `json:"time,omitempty"`
	Value float64   `json:"value,omitempty"`
}

type Config

type Config struct {
	// Host is the host interface on which to start the dashboard server. If this
	// field is empty, no dashboard will be started.
	Host string `toml:",omitempty"`

	// Port is the TCP port number on which to start the dashboard server. The
	// default zero value is/ valid and will pick a port number randomly (useful
	// for ephemeral nodes).
	Port int `toml:",omitempty"`

	// Refresh is the refresh rate of the data updates, the chartEntry will be collected this often.
	Refresh time.Duration `toml:",omitempty"`

	// Assets offers a possibility to manually set the dashboard website's location on the server side.
	// It is useful for debugging, avoids the repeated generation of the binary.
	Assets string `toml:",omitempty"`
}

Config contains the configuration parameters of the dashboard.

type Dashboard

type Dashboard struct {
	// contains filtered or unexported fields
}

Dashboard contains the dashboard internals.

func New

func New(config *Config) (*Dashboard, error)

New creates a new dashboard instance with the given configuration.

func (*Dashboard) APIs

func (db *Dashboard) APIs() []rpc.API

APIs is a meaningless implementation of node.Service.

func (*Dashboard) Protocols

func (db *Dashboard) Protocols() []p2p.Protocol

Protocols is a meaningless implementation of node.Service.

func (*Dashboard) Start

func (db *Dashboard) Start(server *p2p.Server) error

Start implements node.Service, starting the data collection thread and the listening server of the dashboard.

func (*Dashboard) Stop

func (db *Dashboard) Stop() error

Stop implements node.Service, stopping the data collection thread and the connection listener of the dashboard.

type HomeMessage

type HomeMessage struct {
	Memory  *Chart `json:"memory,omitempty"`
	Traffic *Chart `json:"traffic,omitempty"`
}

type LogsMessage

type LogsMessage struct {
	Log string `json:"log,omitempty"`
}

type Message

type Message struct {
	Home    *HomeMessage    `json:"home,omitempty"`
	Chain   *ChainMessage   `json:"chain,omitempty"`
	TxPool  *TxPoolMessage  `json:"txpool,omitempty"`
	Network *NetworkMessage `json:"network,omitempty"`
	System  *SystemMessage  `json:"system,omitempty"`
	Logs    *LogsMessage    `json:"logs,omitempty"`
}

type NetworkMessage

type NetworkMessage struct {
}

type SystemMessage

type SystemMessage struct {
}

type TxPoolMessage

type TxPoolMessage struct {
}