diff --git a/.github/workflows/e2e-docker.yml b/.github/workflows/e2e-docker.yml index 8e6ae6ac0..7bf4851ad 100644 --- a/.github/workflows/e2e-docker.yml +++ b/.github/workflows/e2e-docker.yml @@ -41,6 +41,6 @@ jobs: with: working-directory: frontend/src/main/frontend/ build: npm run build:prod - start: docker-compose up -d + start: docker-compose -f ../../../../docker-compose.demo.yml up -d wait-on: "http://localhost:8080/" wait-on-timeout: 360 diff --git a/.run/StandaloneInitializer.run.xml b/.run/StandaloneInitializer.run.xml deleted file mode 100644 index 1c482888d..000000000 --- a/.run/StandaloneInitializer.run.xml +++ /dev/null @@ -1,17 +0,0 @@ - - - - \ No newline at end of file diff --git a/Dockerfile b/Dockerfile index 6b0a48f6e..37a7e7e39 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,11 +1,9 @@ -# This image is created for the https://flow.frankframework.org demo. -FROM frankframework/frankframework:latest +FROM eclipse-temurin:21-jre-alpine -ENV dtap.stage="LOC" -ENV database.instance.name="frank2frankflow" -ENV database.name="database" -ENV CATALINA_OPTS="-Dinstance.name=Frank2FrankFlow" +COPY frank-flow/target/frank-flow-*.war /opt/frank-flow/frank-flow.war -COPY --chown=tomcat ./frontend/src/main/frontend/cypress/Frank/src/main/ /opt/frank/ -COPY --chown=tomcat ./context.xml /usr/local/tomcat/conf/context.xml -COPY --chown=tomcat ./frank-flow/target/frank-flow-3.0.0-SNAPSHOT.war /usr/local/tomcat/webapps/frank-flow.war +EXPOSE 8080 + +WORKDIR /opt/frank-flow + +ENTRYPOINT ["java", "-jar", "frank-flow.war"] diff --git a/Dockerfile.demo b/Dockerfile.demo new file mode 100644 index 000000000..3f0d130c5 --- /dev/null +++ b/Dockerfile.demo @@ -0,0 +1,5 @@ +# This image is created for the https://flow.frankframework.org demo. +FROM frankframework/frankframework:latest + +COPY --chown=tomcat ./frontend/src/main/frontend/cypress/Frank/src/main/ /opt/frank/ +COPY --chown=tomcat ./frank-flow/target/frank-flow-3.0.0-SNAPSHOT.war /usr/local/tomcat/webapps/frank-flow.war diff --git a/README.md b/README.md index 5807a234c..c2120ac4d 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,53 @@ # Frank!Flowbeta -_Graphical flow editor for Frank configurations._ +_Graphical flow editor for Frank!Configs._ -This project will help you visualize and edit your adapters in a flow format. The configurations should be in the “beautiful” syntax. +This project will help you visualize and edit your adapters in a flow format. +The configurations should be in the “beautiful” syntax. -The project has been tested in Mozilla Firefox and Google Chrome, other browsers will possibly give an inaccurate representation of the editor. If you'd like to report a bug, you can do so [here](https://github.com/ibissource/frank-flow/issues/new?assignees=&labels=bug&template=bug_report.md). +If you notice and problems or bugs, please [open an issue](https://github.com/ibissource/frank-flow/issues/new?assignees=&labels=bug&template=bug_report.md). -## Demo's +## Like to see the Frank!Flow in action? + +### 🕹️ Hands-on demo + +Try it out in a hands-on demo at [flow.frankframework.org](https://flow.frankframework.org). +This demo makes use of a read-only file-system, so it won't be possible to save files or to perform other actions on the file-system. ### 📺 Frank!Flow workflow demonstration video -[![image](https://user-images.githubusercontent.com/12416423/163985224-0acb276c-bd0c-4c86-bc8c-14dbf22d1bdc.png)](https://wearefrank.tv/watch/151) Watch [this video on WeAreFrank! TV](https://wearefrank.tv/watch/151) for a demonstration on how to create a configuration with the Frank!Flow. +[![image](https://user-images.githubusercontent.com/12416423/163985224-0acb276c-bd0c-4c86-bc8c-14dbf22d1bdc.png)](https://wearefrank.tv/watch/151) -### 🕹️ Hands-on online demo - -A demo of the Frank!Flow is made general available and can be visited at [flow.frankframework.org](https://flow.frankframework.org). This demo makes use of a read-only file-system, so it won't be possible to save files or to perform other actions on the file-system. +## ✨ Features of the Frank!Flow -## Features of the Frank!Flow +First of all, the Frank!Flow can be used in three ways. +Visually with the node editor, programmatically with the code editor or the two combined in hybrid mode. -First of all, the Frank!Flow consists of three 'modes' or 'views'. These are: Flow, Hybrid and Editor. Each of the modes focus on a specific use case, like editing visually or programatically. The modes are made with usability in mind, which means that the Flow is the most simple and the Editor is the most advanced. +The node editor is simple to use and can assist you in creating a configuration. +The code editor is more powerful and can be used to edit the configuration in XML-code. +The hybrid mode is a combination of the two and will show you every modification you make in real-time. +For example, if you add an element to the Flow, it will automatically get inserted into the XML and the other way around. +This mode is a great way to learn XML or to get an overview of an already existing configuration. ### 📁 Explorer -The Explorer is presented on the left side of the application and can be shown or hidden with a toggle. The explorer will help you to browse configurations, add, rename and delete them. The Explorer is a representation of the file-system where your configurations are located. +The Explorer is presented on the left side of the application and can be shown or hidden with a toggle. +The explorer will help you to browse configurations, add, rename and delete them. +The Explorer is a representation of the file-system where your configurations are located. -There are some buttons associated with the Explorer that will perform actions on the file-system. Three buttons are located on the header and are used for adding, saving and modifying the current file (respectively). The modify button will open a modal in which the file can be renamed or deleted. The four buttons above the Explorer in Editor mode are used for adding, deleting and modifying a file as well as refreshing the Explorer (handy when files have changed on the file-system). A file or folder can be added to by selecting the folder first then pressing the add button. +There are some buttons associated with the Explorer that will perform actions on the file-system. +Three buttons are located on the header and are used for adding, saving and modifying the current file (respectively). +The modify button will open a modal in which the file can be renamed or deleted. +The four buttons above the Explorer in Editor mode are used for adding, deleting and modifying a file as well as refreshing the Explorer (handy when files have changed on the file-system). +A file or folder can be added to by selecting the folder first then pressing the add button. You can select a configuration by clicking on it. The Flow will be loaded on the Canvas. ### 🎨 Palette -The palette contains all the usable listeners, pipes and an exit out of which the adapters are built. These elements are categorized by type and are searchable with the search bar above. +The palette contains all the usable listeners, pipes and an exit out of which the adapters are built. +These elements are categorized by type and are searchable with the search bar above. The element will be added to the canvas by clicking on it. @@ -41,13 +57,13 @@ The Flow is the main attraction of the application and has a lot of hidden featu - You can move the elements by dragging them around. - A forward can be created by dragging from the green circle of the first element, to the yellow circle of the second element. While dragging you can see an arrow, pointing in the direction of the forward. -- A forward can be removed by double clicking it or by disconnecting it from the circle. The latter can be tricky if there are a lot of forwards connected to an element. +- A forward can be removed by double-clicking it or by disconnecting it from the circle. The latter can be tricky if there are a lot of forwards connected to an element. The Flow shows the connection from a listener to a pipe in blue because it isn't a forward. In the XML it is defined as `firstPipe` on the `pipeline`. When no first pipe has been assigned, the Flow will show a dashed line to show the implicitly selected first pipe. The user can manipulate the first pipe by dragging a connection as if it was a forward. ### 🎛 Pipe options -You can select an element by double clicking it on the canvas. The options of the pipe will be opened in a modal in the middle of the screen. Information about the element is given at the top of the modal and it also has a button that will take you to the Frank!Doc of the element. In the middle section it is possible to add, edit and delete attributes on the element. Finally there is a delete button at the bottom, which will remove the element all together. +You can select an element by double-clicking it on the canvas. The options of the pipe will be opened in a modal in the middle of the screen. Information about the element is given at the top of the modal and it also has a button that will take you to the Frank!Doc of the element. In the middle section it is possible to add, edit and delete attributes on the element. Finally there is a delete button at the bottom, which will remove the element all together. ### ⌨ Editor @@ -69,19 +85,62 @@ The available settings are: | `flow:forwardStyle` | `horizontal`, `vertical` | | `flow:gridSize` | `0`, `10`, `25`, `50`, `100` | -## How to use the Frank!Flow +## Get up and running with the Frank!Flow -### Frank!Runner +### 🏃 Frank!Runner -The easiest way to get started with the Frank!Flow is with help of the [Frank!Runner](https://github.com/ibissource/frank-runner). Start a Frank and navigate to http://localhost/frank-flow. +The easiest way to get started with the Frank!Flow is with help of the [Frank!Runner](https://github.com/ibissource/frank-runner). +Start a Frank and navigate to http://localhost/frank-flow. ### Without the Frank!Runner -It is recommended to use the Frank!Runner, because it will ensure that the Frank!Flow can be used while configuring a Frank! without it getting in production. If you want to include the Frank!Flow manually, follow the [instructions for developers](#add-the-frankflow-to-a-frank). +The Frank!Flow can be run without the Frank!Runner. There is however some extra configuration needed. -## Developing the Frank!Flow +If the Frank!Flow is running on the same host as the Frank!Framework, it might be able to figure out the location of the configuration files. +This is only possible it the Frank!Framework is running with Hazelcast. + +If the Frank!Flow is running on a different host (or without Hazelcast), it will need to know the location of the configuration files. +This can be done by setting the `configurations.directory` environment variable. + +#### ☕ Run with Java + +If you want to run the Frank!Flow with Java, you can download the [Frank!Flow WAR](https://nexus.frankframework.org/#browse/browse:frank-flow:org%2Ffrankframework%2Ffrank-flow) and run it with the following command: +```shell +java -jar frank-flow-.war +``` + +#### 🐋 Run with Docker + +The Frank!Flow can be run with Docker. An image is available on Docker Hub at [frankframework/frank-flow](https://hub.docker.com/r/frankframework/frank-flow). + +If a Frank is running on the same host and with Hazelcast, you can use the following command: +```shell +docker run \ + -p 8080:8080 \ + -v :/opt/frank \ + frankframework/frank-flow +``` +Notice how you still need to mount the configuration files. -If you’d like to develop the Frank!Flow it would be handy to store the Frank!Flow project in a folder next to the Frank!Runner. This is recommended because there is a pre-made Frank and `build.xml` to test with. +A docker compose file using Hazelcast is available in the [docker-compose.yml](https://github.com/ibissource/frank-flow/blob/master/docker-compose.yml) file. + +If no Frank is running on the same host or with Hazelcast, you can use the following command: +```shell +docker run \ + -p 8080:8080 \ + -v :/opt/frank \ + -e configurations.directory=/opt/frank/configurations \ + frankframework/frank-flow +``` + +#### 🐆 Run on tomcat + +The Frank!Flow can be run on Tomcat. +Place the [Frank!Flow WAR](https://nexus.frankframework.org/#browse/browse:frank-flow:org%2Ffrankframework%2Ffrank-flow) in the `webapps` folder of Tomcat. + +If a Frank is running on the same host, it will be able to figure out the location of the configuration files. + +## Developing the Frank!Flow This project consists of two main parts: The Angular (TypeScript) frontend and the Java backend. @@ -99,97 +158,66 @@ There are some basic requirements that are needed to test or develop the Frank!F ##### Frontend - [Node.js](https://nodejs.org/en/) -- [Yarn](https://yarnpkg.com/getting-started/install) - -##### Add the Frank!Flow to a Frank! - -The Frank!Flow should run as part of the Frank!Framework so it has access to the Frank!Doc and configuration files. - -###### Maven - -To include the Frank!Flow in a Frank! it's easiest to do this automatically with maven. Otherwise, you'll have to copy the build artifact to the [webapp folder](#manually-add-the-frankflow) manually. - -The POM will tell Maven which extra dependencies you want to download. In this case we want the artifact “frank-flow”. Add the following dependencies and repository to the `pom.xml`: - -```XML - - - org.ibissource - ibis-adapterframework-webapp - [7.7,) - war - - - org.ibissource - frank-flow - [2.2,) - - - - - - ibissource - Ibissource - https://nexus.ibissource.org/content/repositories/public - - -``` - -Notice the added repository, this is needed because the Frank!Flow is hosted on the [Frank!Framework Maven Repository](https://nexus.frankframework.org). - -###### Manually add the Frank!Flow - -The Frank!Flow will be build as a `.jar` file. This file includes everything for the Frank!Flow to work in a Tomcat webapp. To get the Frank!Flow to work in an existing Frank! place the [Frank!Flow Artifact](https://nexus.frankframework.org/service/rest/repository/browse/releases/org/ibissource/frank-flow/) in the `WEB-INF/lib` folder of the Tomcat webapp. #### DevTools -There are some tools that have to be used during development. These tools are needed for linters that keep the code clean and formatted the same way. The tools get run automatically by a Git hook. +There are some tools that have to be used during development. +These tools are needed for linters that keep the code clean and formatted the same way. +The tools get run automatically by a Git hook. -To install the tools go to the folder `frank-flow/src/frontend`. Run `yarn` in this folder and everything should be good to go. This is needed because of the way this mono repo has been structured. This structure might change in the feature. +To install the tools go to the folder `frontend/src/main/frontend`. +Run `npm install` in this folder and everything should be good to go. +This is needed because of the way this repo contains the frontend and the backend. ### Frontend -The code for the frontend is located at `frank-flow/src/frontend`. This folder contains the cypress integration tests, the source files for the application and configurations. +The code for the frontend is located at `frontend/src/main/frontend`. +This folder contains the cypress integration tests, the source files for the application and configurations. -#### Building the frontend +#### Serving the frontend -There are two ways to build the application, for development and for production. The difference lays in the way the code gets optimized. +The frontend can be served by running `npm run start` in the `frontend/src/main/frontend` folder. -##### Development +#### Building the frontend -The dist folder is located at `frank-flow/target/frontend`. Set the absolute path of this folder as [frontend path in the properties file](#configuration) so the Frank!Runner knows which files to serve. To build a development version you can run `yarn build:dev` or `yarn watch` if you want to build continually. The code won’t be minified which will make it easier to debug. +There are two ways to build the application, for development and for production. -##### Production +Run `npm run build:dev` or `npm run watch` if you want to build a development build. +The code won’t be minified which will make it easier to debug. -You can make a production build by running the command `yarn build:prod` or by [building the whole application](#building-the-whole-application). +Run `npm run build:prod` or [building the whole application](#building-the-whole-application) if you want to build a production build. -##### Analyze build +#### Analyze build -To analyze the size of the build and which files are making it so big, run `yarn build:analyze`. +To analyze the size of the build and which files are making it so big, run `npm run build:analyze`. ### Backend -The backend is used to serve the frontend and as an API for getting files from the file-system. The code is located at `frank-flow/src/main/java`. +The backend is used as an API for getting files from the file-system. The code is located at `frank-flow/src/main/java`. -#### Building the backend +#### Running the backend -There are two simple ways to build the backend, for development and production use. +The backend can be run with the Spring Boot Initializer. +Run `mvn spring-boot:run` in the `frank-flow/src/main/java` folder. -##### Building just the backend +##### Building the backend -The easiest option while developing is to just run `mvn install`. This will only build the backend. This could be usefull if you're just developing the API or if the frontend is being served by the Frank!Runner. +Run `mvn install` in the `frank-flow` folder. ##### Building the whole application -The other option to run `mvn install -P frontend`. This command builds both the backend and the frontend. It is meant for production, because this command will also install Node.js and NPM to build the production frontend in a CI environment. +Run `mvn install` to build the whole application. +This command builds both the backend and the frontend. ### Configuration -The Frank!Flow has some configuration options which are mainly used for the backend. The configuration options can be set by placing them in a `frank-flow.properties` file. Every property should be on it's own line and be followed by an equals sign (`=`) and a value. The properties file should be placed in the location from where the Frank!Flow gets start. While developing with the Frank!Runner this would be in the root of the folder `frank-runner`. +The Frank!Flow has some configuration options which are mainly used for the backend. +The configuration options can be set by placing them in a `applications.properties` file. +Every property should be on its own line and be followed by an equals sign (`=`) and a value. +The properties file should be placed in the location from where the Frank!Flow gets start. +While developing with the Frank!Runner this would be in the root of the folder `frank-runner`. -| Property | Description | Default value | -| -------------------------- | ------------------------------------------------ | ------------------------------------ | -| `frank-flow.frontend-path` | The location of the dist folder for the frontend | The frontend in the JAR will be used | -| `frank-flow.context-path` | The URL at which the Frank!Flow will be served | `/frank-flow/` | -| `frank-flow.port` | The port which the build-in Tomcat should use | `8080` | -| `frank-flow.war` | The webapp war | `/frank-flow-webapp.war` | +| Property | Description | Default value | +|----------------------------|-----------------------------------------------|---------------| +| `frank-flow.port` | The port which the embedded Tomcat should use | `8080` | +| `configurations.directory` | The directory location of the Frank!Configs | _empty_ | diff --git a/docker-compose.demo.yml b/docker-compose.demo.yml new file mode 100644 index 000000000..1482d9129 --- /dev/null +++ b/docker-compose.demo.yml @@ -0,0 +1,11 @@ +version: "3" + +services: + frank: + image: frank-flow-demo + build: + context: . + dockerfile: Dockerfile.demo + ports: + - "8080:8080" + restart: unless-stopped diff --git a/docker-compose.yml b/docker-compose.yml index f3bc8cf28..12b1f83fd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,9 +1,15 @@ -version: "3" - services: - frank: + frankframework: + image: frankframework/frankframework:latest + ports: + - "8080:8080" + volumes: &frank-volumes + - ./frontend/src/main/frontend/cypress/Frank/src/main/:/opt/frank/ + environment: + management.gateway.inbound.class: "org.frankframework.management.gateway.HazelcastInboundGateway" + frank-flow: image: frank-flow build: . ports: - - "8080:8080" - restart: unless-stopped + - "8081:8080" + volumes: *frank-volumes diff --git a/frontend/src/main/frontend/cypress/Frank/src/main/resources/DeploymentSpecifics.properties b/frontend/src/main/frontend/cypress/Frank/src/main/resources/DeploymentSpecifics.properties index 6cb37cab0..cc9f88556 100644 --- a/frontend/src/main/frontend/cypress/Frank/src/main/resources/DeploymentSpecifics.properties +++ b/frontend/src/main/frontend/cypress/Frank/src/main/resources/DeploymentSpecifics.properties @@ -1,4 +1,3 @@ -configurations.names=FrankConfig.xsd classloader.type=ScanningDirectoryClassLoader configurations.directory.autoLoad=true diff --git a/frontend/src/main/frontend/cypress/Frank/src/main/resources/resources.yml b/frontend/src/main/frontend/cypress/Frank/src/main/resources/resources.yml new file mode 100644 index 000000000..4eb556700 --- /dev/null +++ b/frontend/src/main/frontend/cypress/Frank/src/main/resources/resources.yml @@ -0,0 +1,4 @@ +jdbc: + - name: 'ibis' + type: 'org.h2.jdbcx.JdbcDataSource' + url: 'jdbc:h2:mem:ibis4test;NON_KEYWORDS=VALUE;DB_CLOSE_ON_EXIT=FALSE;DB_CLOSE_DELAY=-1;TRACE_LEVEL_FILE=0;' diff --git a/frontend/src/main/frontend/cypress/Frank/src/main/webapp/.gitignore b/frontend/src/main/frontend/cypress/Frank/src/main/webapp/.gitignore deleted file mode 100644 index 8edfeac58..000000000 --- a/frontend/src/main/frontend/cypress/Frank/src/main/webapp/.gitignore +++ /dev/null @@ -1,14 +0,0 @@ -META-INF/maven -META-INF/MANIFEST.MF -/iaf/ -/images/ -/js/ -/jsp/ -/larva/ -/META-INF/maven/ -/META-INF/MANIFEST.MF -/WEB-INF/ -/body.css -/favicon.ico -/ie4.css -/ie55.css \ No newline at end of file diff --git a/frontend/src/main/frontend/cypress/Frank/src/main/webapp/my-application/index.html b/frontend/src/main/frontend/cypress/Frank/src/main/webapp/my-application/index.html deleted file mode 100644 index e69de29bb..000000000