BlueCollar Web GUI

Features

• System status monitoring (Network, Internal, Hardware services)
• Mining pool metrics display
• Daily and monthly power consumption charts (from Prometheus)
• Battery configuration management
• Responsive and modern user interface

Technologies Used

Backend

• Go: Primary language
• Gin Web Framework: For routing and API handling
• Prometheus: For time-series data storage and retrieval (power metrics)

Frontend

• React: JavaScript library for building user interfaces
• TypeScript: Superset of JavaScript that adds static typing
• Vite: Fast frontend build tool
• Shadcn/ui: Reusable UI components built with Radix UI and Tailwind CSS
• Recharts: Composable charting library built with React
• Tailwind CSS: Utility-first CSS framework

Setup

To get this project up and running on your local machine, follow these steps:

1. Prerequisites

Make sure you have the following installed:

• Go: Version 1.18 or higher (https://go.dev/doc/install)
• Node.js: Version 18 or higher (https://nodejs.org/en/download/)
• npm or bun: Package manager for Node.js (npm comes with Node.js, bun: https://bun.sh/docs/installation)
• Prometheus: Running and collecting metrics, specifically bluecollar_aux_current_sensor (This project expects Prometheus to be accessible at http://localhost:9090).
• bluecollar core services: The Go backend communicates with other bluecollar services via a Unix socket at /tmp/bluecollar.sock and manages systemd services like bluecollarSerial, bluecollarCore, and NetworkManager. These services should be set up and running on your system for full functionality.

2. Backend Setup (Go)

1. Navigate to the root directory of the project:

   cd /path/to/your/project/webGUI

2. Download the Go modules:

   go mod tidy

3. Build the Go application:

   go build -o ~/webgui

   This will create an executable named webgui in the root directory.

3. Frontend Setup (React with Vite)

1. Navigate to the static directory:

   cd /path/to/your/project/webGUI/static

2. Install the Node.js dependencies using npm (or bun):

   npm install
   # OR
   bun install

3. Build the frontend for production:

   npm run build
   # OR
   bun run build

   This will create a dist directory inside static, containing the optimized static assets for the frontend.

Running the Application

1. Ensure you have built both the backend and frontend as described in the "Setup" section.

2. From the project's root directory (/path/to/your/project/webGUI), run the Go backend executable:

   ./webgui

   The application will start on port 8080 (e.g., http://localhost:8080).

You can now access the BlueCollar Web GUI in your web browser.

Systemd Serivce

1. Create and edit service file:

   sudo nano /etc/systemd/system/juakaliSerial.service

2. Add the following to the file:

   [Unit]
   Description=Jua kali web service
   After=network.target
   
   [Service]
   ExecStart=/home/{USER_NAME}/juakaliWeb
   Type=simple
   Restart=on-failure
   RestartSec=5s
   
   [Install]
   WantedBy=multi-user.target

3. Enable and start the service:

   sudo systemctl daemon-reload
   sudo systemctl enable juakaliWeb
   sudo systemctl start juakaliWeb

4. Check if the service is running:

   sudo systemctl status juakaliWeb

Development

Frontend Development Server

If you are working on the frontend, you can start the Vite development server for hot-reloading:

1. Navigate to the static directory:

   cd /path/to/your/project/webGUI/static

2. Start the development server:

   npm run dev
   # OR
   bun run dev

   This will typically serve the frontend on http://localhost:5173. Note that when the Vite dev server is running, the Go backend will serve the index.html from the static/ directory, but the frontend assets will be requested from the Vite dev server.

Linting

To run the linter for the frontend:

1. Navigate to the static directory:

   cd /path/to/your/project/webGUI/static

2. Run the lint command:

   npm run lint
   # OR
   bun run lint