v2 version (#239)

* Draft v2 version

* Updated the code

* Add Rating/Ranking/Edit vote with i18n

* Added documentation

* Move all message to i18n

* Fixed i18n minor error

* Add keyDown

* Improved edit vote and other

* Fixed documentation

* Add comment to docker-compose.yml

---------

Co-authored-by: Mahmoud Hashemi <[email protected]>

.dockerignore

@@ -0,0 +1,5 @@
+frontend
+client
+test_data
+fe
+docs

Makefile

@@ -0,0 +1,14 @@
+start:
+	docker compose build && docker compose up
+
+start-detached:
+	docker compose build  && docker compose up -d
+
+stop:
+	docker compose down
+
+logs:
+	docker compose logs -f
+
+restart:
+	docker compose down && docker compose up --build

deployment_v2.md

@@ -0,0 +1,126 @@
+# Montage Deployment
+
+These are instructions for deploying Montage on Toolforge.
+
+## Deploying on Toolforge from scratch
+These instructions is only first time when setuping project on Toolforge
+
+##### 1. Get the OAuth credentials.
+[Register your app](https://meta.wikimedia.org/wiki/Special:OAuthConsumerRegistration/propose) and save your consumer token and secret token for later.
+
+##### 2. SSH to Toolforge and then inside tool
+```bash
+ssh <shell-username>@login.toolforge.org
+become montage-beta
+```
+Here, we are using `montage-beta` instance but it can be `montage` or `montage-dev` as well.
+
+##### 3. Clone the repo as src directory
+```bash
+mkdir -p $HOME/www/python
+cd $HOME/www/python
+git clone https://github.com/hatnote/montage.git src
+```
+
+##### 4. Make the frontend build
+```bash
+toolforge webservice node18 shell -m 2G
+cd $HOME/www/python/src/frontend
+npm install
+npm run toolforge:build
+exit
+```
+This will build the vue prod bundle and put in backend's `template` and `static` directory.
+
+##### 5. Create your database
+* Get the user name of database (`cat ~/replica.my.cnf`)
+* Open up MariaDB with `sql local`
+* Create a [Toolforge user database](https://wikitech.wikimedia.org/wiki/Help:Toolforge/Database#User_databases) (`create database <user>__<db name>;`), and remember the name for the config
+
+##### 6. Set up the montage config
+* Make a copy of `config.default.yaml` for your environment
+   * You may need to update `USER_ENV_MAP` in `montage/utils.py` if you need to add a new environment
+* Add the `oauth_consumer_token` and `oauth_secret_token` 
+* Add a `cookie_secret: <your random secret>`
+* Add the `db_url` with your user database name, and the password from `~/.replica.my.cnf`
+    * The format is: `mysql://<user>:<password>@tools.labsdb/<db name>?charset=utf8`
+* Add `api_log_path: /data/project/<project>/logs/montage_api.log`
+* Add `replay_log_path: /data/project/<project>/logs/montage_replay.log`
+* Add `labs_db: True`
+* Add `db_echo: False`
+* Add `root_path: '/'`
+
+
+##### 7. Creating a virtual environment
+```bash
+toolforge webservice python3.9 shell
+python3 -m venv $HOME/www/python/venv
+source $HOME/www/python/venv/bin/activate
+pip install --upgrade pip wheel
+pip install -r $HOME/www/python/src/requirements.txt
+exit
+```
+
+##### 8. Start the backend service
+```bash
+toolforge webservice python3.9 start
+```
+
+##### 9. Testing of deployment
+* Visit /meta to see the API. Example: https://montage-beta.toolforge.org/meta/
+* In the top section, you should see that the service was restarted in the last few seconds/minutes.
+
+
+---
+
+
+## Deploying new changes
+
+If montage is already deployed then you just need following to deploy new changes.
+
+##### 1. Check the instance usage
+Login to the tool webapp. Make sure, you are maintainer on the webapp instance. Use the audit log endpoint to check that the instance isn't in active use. Example: https://montage-beta.toolforge.org/v1/logs/audit
+
+This will tell latest usage of instance by audit `create_date`. You can continue if instance is not being used.
+
+Sometimes, instance can in use, but there can be important bugfix and we can push anyways.
+
+##### 2. SSH to Toolforge and then inside tool
+```bash
+ssh <shell-username>@login.toolforge.org
+become montage-beta
+```
+Here, we are using `montage-beta` instance but it can be `montage` or `montage-dev` as well.
+
+##### 3. Get new changes from remote
+```bash
+cd $HOME/www/python/src
+git pull
+```
+
+##### 4. Make the frontend build
+```bash
+toolforge webservice node18 shell -m 2G
+cd $HOME/www/python/src/frontend
+npm install
+npm run toolforge:build
+exit
+```
+
+##### 5. (Optional) Install python packages
+If you added new python packages in changes then you have to install them in pod.
+```bash
+toolforge webservice python3.9 shell
+source $HOME/www/python/venv/bin/activate
+pip install -r $HOME/www/python/src/requirements.txt
+exit
+```
+
+##### 8. Restart the backend service
+```bash
+toolforge webservice python3.9 restart
+```
+
+##### 9. Testing of deployment
+* Visit /meta to see the API. Example: https://montage-beta.toolforge.org/meta/
+* In the top section, you should see that the service was restarted in the last few seconds/minutes.

dev_v2.md

@@ -0,0 +1,200 @@
+# Developer Setup Guide
+
+Welcome to the **Montage Project**! This guide will help you set up the project for local development.
+
+---
+
+## Overview
+
+The **Montage Project** is a web application with two main components:
+
+1. **Frontend**:
+   - Built with **Vue 3**.
+   - Includes **Wikimedia Codex** for UI components, **Axios** for API requests, and **Pinia** for state management.
+   - Compiled using **Vite** for fast builds.
+
+2. **Backend**:
+   - Built with **Clastic**, a Python framework.
+   - Uses various Python libraries such as:
+     - **SQLAlchemy**: Database interactions.
+     - **mwoauth**: Used for authentication with MediaWiki’s OAuth.
+     - **pymysql**: MySQL driver.
+   - Serves the frontend and exposes API endpoints for application functionality.
+
+---
+
+## Prerequisites
+
+Ensure the following are installed:
+- **Docker** and **Docker Compose**: [Install Docker](https://www.docker.com/products/docker-desktop).
+- **Node.js** (v16 or above): [Install Node.js](https://nodejs.org).
+- **Make**: Available on most Unix-based systems.
+
+---
+
+## Setting Up the Project
+
+### 1. Clone the Repository
+```bash
+git clone [email protected]:hatnote/montage.git
+cd montage
+```
+
+### 2. Start the Frontend Build Watcher
+```bash
+cd frontend
+npm install
+npm run watch:build
+```
+
+⚠️ **Frontend does not run in dev mode**: `npm run watch:build` above will watch for changes by using `chokidar` command and automatically copied to the backend's `static` and `template` directories. So there will not be any hot reloading. Developers must refresh the browser to see updates.
+
+Apart from `npm watch:build`, these are other commands:
+* `npm run lint`: Lint the code
+* `npm run format`: Format the code
+
+### 3. Use the Makefile to start the backend
+* Open a new terminal tab and change directory to root of repo
+* Copy and edit `config.dev.yaml` based on `config.default.yaml`
+* (Optional) In `config.dev.yaml` there is a line for `dev_local_cookie_value`. To get it,
+log in to the local app in your browser, and then copy the value from the
+`clastic_cookie` in the apps' cookies. This is your login cookie.
+* (Optional) Add your username as the `superuser` in the config. (This will allow you to
+add `su_to=<any user>` to the backend, if you want to test submitting as another
+juror.)
+* Add your username to the list of maintainers in [rdb.py line 113](https://github.com/hatnote/montage/blob/master/montage/rdb.py#L113).
+This will give your user top-level permissions in the full app, so you can view
+some logs (audit logs, active users), add/remove organizers, and get a
+coordinator view into all campaigns.
+* Start the montage backend
+```bash
+make start
+```
+This will build the docker image for the montage backend and start the container. Apart from `make start`, these are other commands:
+* `make start-detached` : Start the backend container in detached mode
+* `make stop` : Stop the backend container
+* `make logs` : Stream the backend container logs in real-time.
+* `make restart` : Restart the backend container
+
+### 4. Access the Application
+* Open http://localhost:5001 in your browser.
+
+The application server runs on localhost port 5001, visit [http://localhost:5001/meta](http://localhost:5001/meta) to see a list
+of valid URL patterns and other details.
+
+Almost all endpoints from backend (except for OAuth and `/static/`) return JSON as long as the proper Accept header is set (done by most libraries) or `format=json` is passed in the query string.
+
+## Project struture (v2 only)
+```bash
+├── DEV.md
+├── Dockerfile
+├── LICENSE
+├── MANIFEST.in
+├── Makefile
+├── PROJECT_LOG.md
+├── config
+│   ├── beta-uwsgi.ini
+│   ├── dev-uwsgi.ini
+│   └── prod-uwsgi.ini
+├── config.default.yaml
+├── deployment.md
+├── design.md
+├── docker-compose.yml
+├── frontend
+│   ├── index.html
+│   ├── jsconfig.json
+│   ├── package-lock.json
+│   ├── package.json
+│   ├── public
+│   ├── src
+│   └── vite.config.js
+├── montage
+│   ├── __init__.py
+│   ├── __main__.py
+│   ├── __pycache__
+│   ├── admin_endpoints.py
+│   ├── app.py
+│   ├── check_rdb.py
+│   ├── clastic_sentry.py
+│   ├── docs
+│   ├── imgutils.py
+│   ├── juror_endpoints.py
+│   ├── labs.py
+│   ├── loaders.py
+│   ├── log.py
+│   ├── meta_endpoints.py
+│   ├── mw
+│   ├── public_endpoints.py
+│   ├── rdb.py
+│   ├── rendered_admin.py
+│   ├── server.py
+│   ├── simple_serdes.py
+│   ├── static
+│   ├── templates
+│   ├── tests
+│   └── utils.py
+├── report.html
+├── requirements-dev.txt
+├── requirements.in
+├── requirements.txt
+├── setup.py
+├── tools
+│   ├── _admin.py
+│   ├── admin.py
+│   ├── check_schema.py
+│   ├── create_schema.py
+│   ├── drop_schema.py
+│   └── trim_csv.py
+└── tox.ini
+```
+These provides a detailed explanation of the main components in the **Montage Project**.
+
+#### Directory: `montage`
+##### **Core Files**
+- **`app.py`**: Initializes the application and defines middleware, routes, or app-wide configurations.
+- **`server.py`**: Starts the server, setting up the backend to listen on a specific port.
+- **`__main__.py`**: Entry point when running the backend module.
+
+##### **API Endpoints**
+- **`admin_endpoints.py`**: Handles admin-specific routes (e.g., user management, settings).
+- **`juror_endpoints.py`**: Contains juror-related APIs (e.g., task assignments, voting).
+- **`meta_endpoints.py`**: General application metadata or system information.
+- **`public_endpoints.py`**: APIs accessible to public or unauthenticated users.
+
+##### **Utilities**
+- **`imgutils.py`**: Handles image processing and manipulation.
+- **`simple_serdes.py`**: Serializes and deserializes objects to JSON or other formats.
+- **`log.py`**: Configures application logging.
+
+##### **Database**
+- **`rdb.py`**: Manages database interactions (queries, migrations, etc.).
+- **`check_rdb.py`**: Verifies database schema integrity.
+
+##### **Static and Templates**
+- **`static/`**: Holds CSS, JavaScript, and other assets.
+- **`templates/`**: Contains Jinja2 templates for dynamic HTML rendering.
+
+##### **Testing**
+- **`tests/`**: Basic tests for backend components.
+
+
+#### Directory: `frontend`
+
+##### **Core Files**
+- **`src/`**: Source code, including components, routes, and utilities.
+- **`public/`**: Static assets, such as images and global styles.
+- **`vite.config.js`**: Configuration for the Vite build tool.
+
+
+#### Directory: `tools`
+
+##### **Key Scripts**
+- **`create_schema.py`**: Creates database tables.
+- **`drop_schema.py`**: Drops all database tables.
+- **`check_schema.py`**: Verifies schema correctness.
+- **`trim_csv.py`**: Utility for cleaning CSV files
+
+
+#### Docker Files
+- **`Dockerfile`**: Builds the backend container.
+- **`docker-compose.yml`**: Orchestrates service for backend.

docker-compose.yml

@@ -0,0 +1,13 @@
+services:
+  montage:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "5001:5000"  # Airplay runs on port 5000 on mac. See https://forums.developer.apple.com/forums/thread/682332
+    environment:
+      - PYTHONPATH=/app
+    volumes:
+      - .:/app
+    command: >
+      bash -c "python tools/create_schema.py && python -m montage"

dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.9-slim
+
+RUN apt-get update && apt-get install -y git
+
+WORKDIR /app
+
+COPY requirements.txt .
+
+RUN pip install --upgrade pip
+RUN pip install -r requirements.txt
+
+EXPOSE 5000

frontend/.eslintrc.cjs

@@ -0,0 +1,14 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}