Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nearform/autocannon-ui

A graphical user interface for autocannon providing the same user experience
https://github.com/nearform/autocannon-ui

autocannon hacktoberfest

Last synced: 16 days ago
JSON representation

A graphical user interface for autocannon providing the same user experience

Host: GitHub
URL: https://github.com/nearform/autocannon-ui
Owner: nearform
Created: 2021-05-04T08:35:09.000Z (over 3 years ago)
Default Branch: master
Last Pushed: 2024-11-25T11:18:15.000Z (27 days ago)
Last Synced: 2024-12-02T09:23:38.609Z (20 days ago)
Topics: autocannon, hacktoberfest
Language: JavaScript
Homepage:
Size: 55.3 MB
Stars: 39
Watchers: 81
Forks: 3
Open Issues: 5
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        # autocannon-ui

[![ci](https://github.com/nearform/autocannon-ui/actions/workflows/ci.yml/badge.svg)](https://github.com/nearform/autocannon-ui/actions/workflows/ci.yml)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

This monorepo contains packages and applications which provide a GUI for using autocannon while maintaining the same user experience. 

It provides the ability to compare two autocannon results.

To compare, the user must tick two results and press the `Compare` button. The popup that appeared will display the comparing result.

For understanding the result, please see the `autocannon-compare` [documentation](https://github.com/mcollina/autocannon-compare).

- [Screenshots](#screenshots)

- [Getting started](#getting-started)

- [Development](#development)

  * [Designs](#designs)

- [Packages](#packages)

  * [`autocannon-ui-frontend`](#autocannon-ui-frontend)

  * [`autocannon-ui-backend`](#autocannon-ui-backend)

  * [`autocannon-compare-cli`](#autocannon-compare-cli)

## Screenshots

![Autocannon Options](./images/app.jpg?raw=true "Autocannon Options")  

![Autocannon Report](./images/report.jpg?raw=true "Autocannon Report")  

![Autocannon Compare](./images/compare.jpg?raw=true "Autocannon Compare") 

## Getting started

The easiest way to try this out is to run:

- `npx autocannon-ui`

- a new browser window will be opened automatically

You can also provide port or host parameter to listen on port/host of your choice.

```sh

npx autocannon-ui --help

Usage: autocannon-ui [options]

Options:

  -p, --port   listening port

  -h, --host   host to bind (default: "localhost")

  --help             display help for command

```

- In some containers like podman, you need to pass host as '0.0.0.0' to listen on all available interfaces. For more information please check this [link](https://fastify.dev/docs/latest/Reference/Server/#listentextresolver).

## Development

To easily develop the packages of this repo you can execute:

```sh

npm install

npm start

```

This will:

- run `autocannon-frontend` build in watch mode so you can change the React components and see the result immediately

- run `autocannon-backend` in standalone mode to have a server running

- expose: [http://localhost:3000](http://localhost:3000) so that you may navigate to it

### Designs

Designs can be found [here](https://www.figma.com/design/AF0bjU0gReLLY4Rey2K1OE/Autocannon?node-id=3303-280&t=Dbl69bl098In0Y1R-1).

## Packages

### `autocannon-ui-frontend`

A library of React components which provide the UI.

### `autocannon-ui-backend`

A standalone Fastify application.

### `autocannon-compare-cli`

A CLI tool to compare autocannon results and display them in a readable way.