Mechanic

Your Garage UI

[ Garage | Deuxfleurs ]

_{The coolest UI for the coolest self-hosted, s3 compatible, distributed object storage service.
Built with 🫕 by Xavier Stouder.}

Table of Contents

• Features
• Installation
• Configuration
• Development
• Special thanks
• Screenshots

Features

• Cluster status dashboard
• Cluster and layout management
• Manage or browse buckets
• Manage website config of buckets
• Manage keys
• Manage admin tokens
• Auth using admin token

Coming soon (hopefully)

• Introspect admin token used to enable/disables views on Mechanic
• Get rid of the backend part to host mechanic directly inside a Garage bucket

Installation

Mechanic is available as a single JAR file and docker image.

Docker CLI

$ docker run -e GARAGE_API_URL=http://127.0.0.1:3903 -e MECHANIC_BROWSE_ENABLE=true -e GARAGE_S3_URL=http://127.0.0.1:3900 -p 8080:8080 --restart unless-stopped --name mechanic mechanic:latest

Docker Compose

services:
  garage:
    container_name: garage
    image: dxflrs/garage:v2.0.0
    restart: unless-stopped
    ports:
      - 3900:3900
      - 3901:3901
      - 3902:3902
      - 3903:3903
    volumes:
      - ./garage.toml:/etc/garage.toml
      - ./meta:/var/lib/garage/meta
      - ./data:/var/lib/garage/data
  mechanic:
    container_name: mechanic
    image: 'ghcr.io/stouderio/mechanic:latest'
    restart: unless-stopped
    environment:
      GARAGE_API_URL: http://garage:3903
      MECHANIC_BROWSE_ENABLE: true
      GARAGE_S3_URL: http://garage:3900
    ports:
      - 3910:8080
    depends_on:
      - garage
      

JAR file

$ java -jar mechanic.jar

Configuration

Following environment variables can be set to configure Mechanic:

Variable	Required	Description
GARAGE_API_URL	Yes	Garage admin api endpoint
MECHANIC_BROWSE_ENABLE	No	If true, Mechanic allow the user to browse buckets it can access.
GARAGE_S3_URL	Only MECHANIC_BROWSE_ENABLE is true	Garage s3 endpoint

Development

The project is fully bootstrapped using Gradle. Frontend is located in the frontend subfolder.

Stack

Most stack choice was guided by what I'm already familiar with. Backend use Spring Boot framework with Kotlin. Frontend use React, TailwindCSS for styling and ShadCN components as UI elements.

Architecture

The frontend currently interacts with Garage using its admin API v2, which means the frontend theoretically has all the functionality needed to run Mechanic. However, the backend is still required to proxy requests from the frontend to Garage with proper CORS headers, since Garage doesn't allow CORS configuration.

My ultimate goal is to eliminate the Kotlin backend entirely, making Mechanic a static frontend app that could be hosted directly from a Garage bucket, but this isn't possible until Garage adds CORS configuration support.

Contributing

Contributions are welcome =)

Special thanks

• Garage's contributors for building Garage.
• khairul169 for the garage-webui, which inspired this project.

Screenshots

Login

Dashboard

Cluster

Buckets

Bucket manage

Keys

Admin tokens