Leto Modelizer (leto-modelizer)

Technical topology low-code editing tool.

Leto modelizer is an application that can help you generate infrastructure code without you having to write any code! One of theirs main qualities is that you can choose:

• which languages you can provide with this application

Or

• Implements your own plugin

Or

• Override existing plugins

If your company take care only of terraform files, you just have to install terraform before build this app and deploy it.

If you only want your own language component (maybe based on existing plugins), you can implement/override existing plugin and just install your plugin definition.

Requirements

• node - v18.4
• npm - v8.19.3

Official plugins

For now, we don't have many plugins to offer you, but follow us and in the next (few) months you will see new plugins (like Jenkins or Kubernetes).

Terraform plugin

Plugin to manage terraform files, by default it comes with aws provider definition.

GitHub url

Github plugin

Plugin to manage github action files.

GitHub url

Compatibility versions table

Leto-modelizer	Supported version
	Plugin-core	Terrator-plugin	Githubator-plugin
1.0.0	= 0.13.0 = 0.14.0	= 0.1.12	🚫
1.1.0	= 0.15.2	= 0.2.0	= 0.1.1
1.2.0	= 0.16.0	= 0.3.0	= 0.2.0
Next	= 0.18.0	= 0.4.0	= 0.2.2

How to install plugin

Run npm install to let npm retrieve all dependencies and especially our cli to easily install your plugins 😉.

Then you just have to know two things about your plugins:

• it's name
• it's repository url

To install plugin, run this command npm run plugin:install. You can choose between installing official or custom plugins.

Install official plugins

The leto-modelizer-plugin-cli.json file, at the root of Leto Modelizer, contains the list of official plugins provided by the team. Each plugin is represented by an object containing the name, repository URL and version of the plugin.

Choose Official plugins to select from the list of official plugins, one or more plugin(s) to install.

Install custom plugin

Choose Custom plugin to install a specific plugin not referenced as an official plugin.

Examples with official plugins:

• terrator-plugin:
  • plugin name: terrator-plugin
  • git repository url: https://github.com/ditrit/terrator-plugin.git#0.4.0
• githubator-plugin:
  • plugin name: githubator-plugin
  • git repository url: https://github.com/ditrit/githubator-plugin.git#0.2.2

Install custom plugin in command line

Options repository-name and repository-url can be added with the npm run plugin:install command to bypass cli prompts.

# Example with terraform plugin
npm run plugin:install -- repository-name="terrator-plugin" repository-url="https://github.com/ditrit/terrator-plugin.git#0.4.0"

# Example with github action plugin
npm run plugin:install -- repository-name="githubator-plugin" repository-url="https://github.com/ditrit/githubator-plugin.git#0.2.2"

Now that your plugin is installed, you can continue to install other plugins with the same command if you want.

Initialize plugins

When you have installed all the desired plugins, please run this commands npm run plugin:init to complete all plugins' installation.

How to setup the authentication with OIDC

We use OIDC authentication with oidc-client-ts library. To do so, you must fill the configuration related to the provider of your choice inside global.config.json root file. You can declare one or more provider for the user to log in. Example with Google and Github providers.

{
  "authentication": {
    "OIDC": [
      {
        "name": "Github",
        "icon": "github.svg",
        "config": {...}
      },
      {
        "name": "Google",
        "icon": "google.svg",
        "config": {...}
      }
    ]
  }
}

• the name is the name of the provider. It is required.
• the icon is the icon of the provider. It is required, must be named /[OIDC[x].name]/i.svg and be placed inside public/provider folder.

The config object might change from one provider to another. Here is an example configuration for Github provider:

{
  "authentication": {
    "OIDC": [
      {
        "name": "Github",
        "icon": "provider/github.svg",
        "config": {
          "authority": "https://token.actions.githubusercontent.com",
          "client_id": "your-client-id",
          "redirect_uri": "https://your-app.com/redirect",
          "response_type": "code",
          "scope": "openid profile email",
          "automatic_silent_renew": true,
          "silent_redirect_uri": "https://your-app.com/silent-refresh",
          "token_endpoint": "https://github.com/login/oauth/access_token/",
          "token_type": "bearer",
          "client_secret": "your-client-secret",
          "metadata": {
            "authorization_endpoint": "https://github.com/login/oauth/authorize",
            "authority": "https://token.actions.githubusercontent.com",
            "client_id": "your-client-id",
            "redirect_uri": "https://your-app.com/redirect",
            "response_type": "code",
            "scope": "openid profile email",
            "automatic_silent_renew": true,
            "silent_redirect_uri": "https://your-app.com/silent-refresh",
            "token_endpoint": "https://github.com/login/oauth/access_token/",
            "token_type": "bearer",
            "client_secret": "your-client-secret",
          }
        }
      }
    ]
  }
}

Here's a description of each key in the provided configuration:

authority: The URL of the OIDC provider's authority. It represents the base URL of the provider's authentication server.

client_id: The client identifier assigned by the OIDC provider for your application. It is used to identify your application when making authentication requests.

redirect_uri: The URI where the OIDC provider will redirect the user after successful authentication. It should be a URL within your application where you can handle the authentication response.

response_type: The type of response expected from the OIDC provider. In this case, it is set to 'code', indicating that the authorization code flow will be used for authentication.

scope: The requested scopes for the authentication process. Scopes define the access rights and information that your application requests from the user.

automatic_silent_renew: A boolean value indicating whether to automatically renew the user's access token silently in the background when it expires.

silent_redirect_uri: The URI where the OIDC provider will redirect to perform silent token renewals. It should be a URL within your application.

token_endpoint: The URL of the OIDC provider's token endpoint. It is used to exchange the authorization code for an access token.

token_type: The type of token that will be used, typically 'bearer' for OAuth 2.0-based authentication.

client_secret: The client secret assigned by the OIDC provider for your application. It is used to authenticate your application when exchanging the authorization code for an access token.

metadata: Additional metadata related to the OIDC provider configuration. It includes properties like authorization_endpoint, token_endpoint, client_id, redirect_uri, and others.

⚠️ Don't forget to update nginx.conf with a reverse proxy for your authentication provider.

How to build this app

Native build

Once you have installed and initialized all your plugins, run this command to build the app:

npm run build

It will generate the built application in the dist folder.

Docker build

To build this app with docker, please use this command:

docker build . --build-arg proxy_url=http://localhost:9999 -t leto-modelizer

Proxy

See nginx configuration.

Environment variables

• Using templates from a remote repository

TEMPLATE_LIBRARY_BASE_URL is used to define the url of a template library you want to use. To have more information on how to build your own template library, please visit leto-modelizer-templates-library. To define TEMPLATE_LIBRARY_BASE_URL, go to your repository, open the index.json file (which contains all the metadata of your templates) in raw mode and get the url to the branch name, without including the file name.

# Example with the leto-modelizer-templates-library repository that contains all default templates for leto-modelizer.
TEMPLATE_LIBRARY_BASE_URL="https://raw.githubusercontent.com/ditrit/leto-modelizer-templates-library/main" npm run build

To be able to access external resources for your templates, you need to set a reverse proxy named template-library. You can see an example below of an nginx.conf file:

http {
  server {
    listen 80;
    location /template-library {
      proxy_pass TEMPLATE_LIBRARY_BASE_URL; # replace by your url
    }
  }
}

NOTE: You can use the global configuration file global.config.json to define TEMPLATE_LIBRARY_BASE_URL environment variable like so :

{
  "templateLibrary": "YOUR_TEMPLATE_LIBRARY_BASE_URL",
  "authentication": {
    "OIDC": [{ /* config */ }]
  }
}

• Allow to keep data-cy attribute in html

KEEP_CYPRESS_ATTRIBUTE is used to keep all data-cy attribute in the generated html.

KEEP_CYPRESS_ATTRIBUTE=true npm run build