Tackle UI

The UI web console for the tackle project.

Starting the UI

Clone repository

git clone https://github.com/konveyor/tackle-ui

Start application's service dependencies

Tackle UI requires the following services in order to work properly:

• tackle-controls
• tackle-application-inventory
• tackle-pathfinder
• keycloak

You can start all services using docker-compose.yml:

docker-compose up

Start the UI

Install the npm dependencies:

yarn install

Start the UI:

yarn start

You should be able to open http://localhost:3000 and start working on the UI.

Start the UI and use a custom application's service dependency

As described in the section Start the UI it is possible to start all application's service dependencies, but what if you want the UI use your custom version of tackle-controls, tackle-application-inventory, or tackle-pathfinder? You can start your custom application's service dependency and let the UI point to your service using src/setupProxy.js.

The process for using a custom application's service dependency is the same for all of them. The following section has an example of a custom tackle-controls that you can replicate for the rest of services.

Custom tackle-controls

Fork/clone tackle-controls:

git clone https://github.com/konveyor/tackle-controls

Start tackle-controls database

Start a database which will be used by tackle-controls:

docker run -d -p 5432:5432 \
-e POSTGRES_USER=username \
-e POSTGRES_PASSWORD=password \
-e POSTGRES_DB=controls_db \
postgres:13.1

Start tackle-controls

Move your terminal to where you cloned tackle-controls and then:

./mvnw quarkus:dev \
-Dquarkus.http.port=8080 \
-Dquarkus.datasource.username=username \
-Dquarkus.datasource.password=password \
-Dquarkus.datasource.jdbc.url=jdbc:postgresql://localhost:5432/controls_db \
-Dquarkus.oidc.client-id=controls-api \
-Dquarkus.oidc.credentials.secret=secret \
-Dquarkus.oidc.auth-server-url=http://localhost:8180/auth/realms/konveyor

Edit src/setupProxy.js

Finally, open src/setupProxy.js and change the port (from 8081 to 8080) of the /api/controls endpoint. It should look like:

module.exports = function (app) {
  app.use(
    "/api/controls",
    createProxyMiddleware({
      target: "http://localhost:8080",
      changeOrigin: true,
      pathRewrite: {
        "^/api/controls": "/controls",
      },
    })
  );
};

Start application's service dependencies

You can start all services using docker-compose.yml:

docker-compose up

Start the UI

You can start the UI using:

yarn start

You should be able to open http://localhost:3000 and start working on the UI; notice that this time the UI will point to the custom tackle-controls service you started rather than the service comming from docker-compose.yml.

Build

To build a container image for the UI based on local code, execute the following commands:

yarn build
podman build -t quay.io/$USERNAME/tackle-ui .

consider replacing podman with docker if you have the latter installed and quay.io registry with the one you're using.
The image can be pushed running:

podman push quay.io/$USERNAME/tackle-ui

Internationalization

To contribute translating Tackle UI into a new language please read Internationalization

License

In order to check all files have the proper license header set, run:

yarn license-check-and-add check

To add the license header to all the files missing it, run:

yarn license-check-and-add add