Add support for development environment with docker

.dockerignore

@@ -0,0 +1,6 @@
+vendor
+
+frontend/node_modules
+
+__pycache__
+.git

.env.example

@@ -11,7 +11,7 @@ LDAP_SERVER="localhost"
 LDAP_PORT=389
 LDAP_BASE="dc=igalia,dc=com"
 ALL_USERS_GROUP="staff"
-USER_GROUPS="staff, admin, manager"
+USER_GROUPS="staff,admin,manager"
 EMPLOYEES_GROUP="staff"
 
 # Uncomment the next lines to enable LDAP user authentication

api/main.py

@@ -17,6 +17,7 @@
     "https://localhost:8000",
     "http://localhost:8000",
     "http://localhost:5173",
+    "http://0.0.0.0:5173",
 ]
 
 app.add_middleware(

api/routers/v1/projects.py

@@ -1,17 +1,21 @@
+from typing import List
 from fastapi import APIRouter, Depends
 from sqlalchemy.orm import Session
 
 from models.project import Project
 from schemas.project import Project as ProjectSchema
+from services.projects import ProjectService
+
 from db.db_connection import get_db
 from auth.auth_bearer import BearerToken
 
 router = APIRouter(prefix="/projects", tags=["projects"])
 
 
-@router.get("/", dependencies=[Depends(BearerToken())], response_model=list[ProjectSchema])
+# TODO implement pagination
+@router.get("/", dependencies=[Depends(BearerToken())], response_model=List[ProjectSchema])
 async def get_projects(db: Session = Depends(get_db), skip: int = 0, limit: int = 100):
-    return db.query(Project).offset(skip).limit(limit).all()
+    return ProjectService(db).get_items()
 
 
 @router.get("/{project_id}", dependencies=[Depends(BearerToken())], response_model=ProjectSchema)

api/services/projects.py

@@ -0,0 +1,9 @@
+from typing import List
+
+from services.main import AppService
+from models.project import Project
+
+
+class ProjectService(AppService):
+    def get_items(self) -> List[Project]:
+        return self.db.query(Project).all() or []

docker/dev.api.Dockerfile

@@ -0,0 +1,15 @@
+FROM debian:bullseye-slim
+
+RUN apt update && apt -y install python3 python3-pip
+
+WORKDIR /api
+
+COPY ./api /api
+
+RUN python3 -m pip install --upgrade pip
+RUN pip install --no-cache-dir .
+RUN pip install .[dev]
+
+EXPOSE 8555
+
+CMD ["uvicorn", "main:app", "--reload", "--host", "0.0.0.0", "--port", "8555"]

docker/dev.app.Dockerfile

@@ -1,39 +1,21 @@
-# Go to http://localhost/phpreport to use it (username: admin ; password = admin)
+FROM debian:trixie-slim
 
-FROM ubuntu:jammy
+RUN apt update
+RUN apt -y install php php-cli php-pgsql php-xml php-curl composer
 
-MAINTAINER Juan A. Suarez Romero <[email protected]>
+WORKDIR /app
 
-ENV DEBIAN_FRONTEND noninteractive
+ADD composer.json /app
 
-RUN apt-get update
+RUN composer update
+RUN composer install
+RUN composer dump-autoload -o
 
-RUN apt-get -y install postgresql apache2 php php-pgsql php-xml supervisor make docutils-common uglifyjs git
+ADD . /app
 
-COPY . /var/www/html/phpreport/
+# Remove other services files
+RUN rm -rf app/api app/frontend
 
-WORKDIR  /var/www/html/phpreport/
+EXPOSE 8000
 
-RUN make help minify
-
-RUN service postgresql start && su postgres -c psql < /var/www/html/phpreport/sql/create_db.sql
-
-RUN service postgresql start && env PGPASSWORD='phpreport' psql -h localhost -U phpreport phpreport < /var/www/html/phpreport/sql/schema.sql
-
-RUN service postgresql start && env PGPASSWORD='phpreport' psql -h localhost -U phpreport phpreport < /var/www/html/phpreport/sql/uniqueConstraints.sql
-
-RUN service postgresql start && env PGPASSWORD='phpreport' psql -h localhost -U phpreport phpreport < /var/www/html/phpreport/sql/otherConstraints.sql
-
-RUN service postgresql start && env PGPASSWORD='phpreport' psql -h localhost -U phpreport phpreport < /var/www/html/phpreport/sql/initialData.sql
-
-RUN service postgresql start && env PGPASSWORD='phpreport' psql -h localhost -U phpreport phpreport < /var/www/html/phpreport/sql/update/all.sql
-
-RUN ln -sf /var/www/html/phpreport/supervisor/supervisord.conf /etc/supervisor/conf.d/
-
-RUN rm -fr /var/www/html/phpreport/install /var/www/html/phpreport/update
-
-VOLUME /var/lib/postgresql/
-
-EXPOSE 80
-
-CMD ["supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]
+CMD ["php", "-S", "0.0.0.0:8000"]

docker/dev.frontend.Dockerfile

@@ -0,0 +1,13 @@
+FROM node:lts-alpine
+
+WORKDIR /frontend
+
+COPY frontend/package.json /frontend
+
+RUN npm install
+
+COPY frontend /frontend
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev"]

docker/docker-compose.dev.yml

@@ -1,17 +1,55 @@
-
-version: '3'
+version: "3"
 services:
+  db:
+    build:
+      context: ../
+      dockerfile: docker/test.db.Dockerfile
+    container_name: phpreport-db
+    ports:
+      - "5432:5432"
+    volumes:
+      - pgdata:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: phpreport
+      POSTGRES_USER: phpreport
   phpreport-app:
     build:
       context: ../
       dockerfile: docker/dev.app.Dockerfile
-    image: igalia/phpreport
     container_name: phpreport-app
+    ports:
+      - "8000:8000"
+    volumes:
+      - ../:/app
+    depends_on:
+      - db
+  api:
+    build:
+      context: ../
+      dockerfile: docker/dev.api.Dockerfile
+    container_name: phpreport-api
+    env_file:
+      - ../.env
+    volumes:
+      - ../api:/api
+    ports:
+      - "8555:8555"
+    depends_on:
+      - db
+  frontend:
+    build:
+      context: ../
+      dockerfile: docker/dev.frontend.Dockerfile
+    container_name: phpreport-frontend
+    env_file:
+      - ../frontend/.env
     volumes:
-      - phpreport-data:/var/lib/postgresql
-    restart: always
+     - type: bind
+       source: ../frontend
+       target: /frontend
     ports:
-      - '80:80'
-
+      - "5173:5173"
+    depends_on:
+      - api
 volumes:
-  phpreport-data:
+  pgdata:

docs/src/developer/devel-setup.md

@@ -3,6 +3,74 @@
 Some steps described here overlap the ones described in the
 [installation instructions](../admin/installation.md).
 
+## Using Docker
+
+Inside the `docker` folder you can find all the Dockerfile and docker-compose
+files for several enviroments. To run the development setup, copy the
+`.env.example` to `.env` and update it to the values of your environment.
+
+In the root `.env`, use these values
+```
+DB_HOST=db
+...
+API_BASE_URL="http://phpreport-api:8555"
+```
+In the `frontend/.env`, use the following:
+```
+VITE_OIDC_REDIRECT_URL='http://0.0.0.0:5173/web/v2/'
+VITE_API_BASE='http://0.0.0.0:8555'
+```
+
+You need docker and docker-compose running and you can run it from the root
+folder of the project with:
+
+`docker-compose -f docker/docker-compose.dev.yml up`
+
+To run migrations:
+
+`docker exec -ti phpreport-db alembic upgrade head`
+
+To create migrations:
+
+`docker exec -ti phpreport-db alembic revision --autogenerate -m "Migrations description"`
+
+All the services are setup to reload when the files are updated without the need
+of rebuild the containers.
+
+If you are using an external OAuth provider, you will also need to add a user to
+the database with the same username as your OAuth user because PhpReport will
+match on the username. To do this, you will want to run the following commands
+once your db container is up and running:
+
+```
+docker exec -ti phpreport-db bash
+psql -U phpreport
+INSERT INTO usr (id, password, login) VALUES (DEFAULT, md5('myusername'), 'myusername') RETURNING id;
+```
+
+This will echo the id of the user you just created. Keep this terminal open. Now
+you will need to also add some permissions to your user. To do this you'll need
+to insert the user id into the `belongs` table along with the proper group id.
+The default group ids added are as follows:
+
+| id | name |
+| -- |  ----- |
+| 1 | staff |
+| 2 | admin |
+| 3 | manager |
+
+If you want your user to have the highest permission level, then run the
+following and replace `{your user id}` with the value returned when you inserted
+your user: `INSERT into belongs VALUES(1, {your user id}), (2, {your user id}),
+(3, {your user id});`
+
+If you want your user to have lower permissions, then remove whichever groups
+from your INSERT statement you don't want your user in.
+
+If you've given your user the highest permissions, then you'll be able to use
+the interface to create clients and projects to use for creating tasks.
+
+
 ## Dependencies
 
 Follow the corresponding section from the [installation
@@ -13,8 +81,8 @@ Additionally, a development environment may need the following
 dependencies to generate minified versions of the JS code and the
 documentation pages:
 
-- Fedora: packages `uglify-js` and `python3-docutils`.
-- Debian/Ubuntu: packages `uglifyjs` and `python3-docutils`.
+- Fedora: package `uglify-js`.
+- Debian/Ubuntu: package `uglifyjs`.
 
 NOTICE: UglifyJS version must be 3.15 or above.
 

frontend/.env.example

@@ -4,4 +4,5 @@ VITE_OIDC_CLIENT_SECRET=
 VITE_OIDC_REDIRECT_URL=
 VITE_OIDC_METADATA_URL=
 VITE_OIDC_RESPONSE_TYPE=
-VITE_API_BASE='http://localhost:8555'
+VITE_API_BASE='http://localhost:8555'
+VITE_OIDC_USERNAME_PROPERTY='preferred_username'

frontend/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vite build",
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write src/",

frontend/src/routes/Dedications.jsx

@@ -5,13 +5,14 @@ import axios from '../utils/ApiClient';
 export default function Dedications() {
   const auth = useAuth();
   const [projects, setProjects] = useState(null);
-  const token = auth.user?.id_token;
+  const token = auth.user?.access_token;
+  const username_prop = import.meta.env.VITE_OIDC_USERNAME_PROPERTY
 
   useEffect(() => {
     const getProjects = async () => {
       try {
         axios(token)
-          .get('/projects')
+          .get('/v1/projects')
           .then(({ data }) => {
             setProjects(data);
           });
@@ -26,7 +27,7 @@ export default function Dedications() {
   return (
     <>
       <h1>This is the Dedications page</h1>
-      <h2>Welcome {auth.user?.profile.sub}</h2>
+      <h2>Welcome {auth.user?.profile[username_prop]}</h2>
       <p>This is a sample React page that is using the FastApi backend to fetch some data.</p>
       <hr />
       <div>