Tagfalter Monitoring Desktop Landingpage

Initialize Repository

Clone repository:

git clone https://git.ufz.de/rdm/biome/tmd/frontend.git

Initialize Submodules:

git submodule init
git submodule update --init

Local configuration

To set up local configuration rename .env.sample to .env.local

Change configuration as needed.

Env-Variables:

Create an .env file containing the required environment variables for the project to run. A sample is given in "env.sample" or just rename the env.sample to ".env".

PROD AND STAGE Systems

Please configure the .env files according the above example for the desired systems.

How Vue handles .env files is described here: https://cli.vuejs.org/guide/mode-and-env.html#modes

LOCAL DEV Dockerized

To apply the latest docker configuration, (re-)build the required docker image (if Dockerfile-dev has been changed).

docker-compose -f docker-compose-dev.yml build --no-cache

Afterwards spin up the docker environment. This might take some time, since the serve script is triggered on startup.

docker-compose -f docker-compose-dev.yml up -d

LOCAL DEV not inside Docker

• access app folder before using npm
• this structure is needed for the build process of the application

cd app/

See package.json for scripts like serve, build, test:unit, lint You can run everything with "npm run" also.

Run app in browser

After starting up the frontend locally on either way visit:

http://localhost:8080

Licences

File that contains the licences: Licences.vue URL to show the licences: URL

Create Graphql files

It used the tool https://www.graphql-code-generator.com/ and use config in graphql-codegen.yml

Update Schema

Backend

This task must be done in Backend to update the models:

1. Change line 586 in file GenericFieldBasedFilter.php from false to true. The line should look like so:

   if (!$this->security->getUser() instanceof MachineUser && !$this->security->getUser() instanceof HumanUser) {
      return false;
   }
   if (!$this->security->getUser() instanceof MachineUser && !$this->security->getUser() instanceof HumanUser) {
      return true;
   }

2. Export Graphql schema from backend Container with php bin/console api:graphql:export -o /repo/schema.graphql
3. Fix collection typing with sed -i -E 's/collection: \[([^!]+)\]!{0}$/collection: [\1!]!/' /repo/schema.graphql
   • If not done, all collection will optional. This is a bug in api-platform, its ignore not null by collections.
4. Redo action one. Change line 586 in file GenericFieldBasedFilter.php from true to false.

Frontend

This task must be done in Frontend to update the models:

1. Copy and replace file /app/schema.graphql
2. Update ts types file with npm run generate
   • Result will be in types.ts

Update Operations

1. Create or append graphql file in (src/) (not the schema) with your personal query.
2. Run npm run generate, this will update the operations.ts file.
   • Result will be in operations.ts
3. Import your query and types form this file.

Coding conventions and format

Conventions

There are coding conventions which are recommended for Typescript (https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html). Many of these conventions are checked and corrected by ESLint.

Format

To have a unique code format when using different IDE's, a .editorconfig-File is located the root of the project. This file is telling the IDE how to format the code of the project.

editorconfig-Plugin - Visual Studio Code

• (go to) "Preferences" -> "Extensions" -> (search for) "editorconfig" -> install "EditorConfig for VS Code " plugin
• to format an opened file press:(MacOS) cmd + s (save file)

editorconfig-Plugin - PHPStorm

• (go to) "Preferences" -> "Plugins" -> (search for) "editorconfig" -> install plugin
• to format an opened file press:(MacOS) alt + cmd + l

editorconfig-Plugin - WebStorm, IntelliJIDEA

• the plugin is already installed
• to format an opened file press:(MacOS) alt + cmd + l

Views & Router

• router is already created for this example.

GraphQL

The GraphQL server URL. There, you can directly go to GraphiQL, GraphQL's official playground and make a sample requests

Customize configuration

See Configuration Reference.

Vulnerabilities and Known Issues

known issues

CHANGELOG

changelog

TODOs && Example Queries

todo

GIT Usage and workflow

git

Localization

The files holding the localized text elements are located in app/src/i18n (de.json for German, en.json for English).

Release

The CI pipeline is set up to create both the corresponding release images and the gitlab release page automatically on each git-tag creation.