diff --git a/docs/002_how-to/40_alm-app/01_getting-started.mdx b/docs/002_how-to/40_alm-app/01_getting-started.mdx index a6fbe0f637..f38f611193 100644 --- a/docs/002_how-to/40_alm-app/01_getting-started.mdx +++ b/docs/002_how-to/40_alm-app/01_getting-started.mdx @@ -23,29 +23,16 @@ If you haven't received this or don't know your details, contact:

dev.s 1. Go to [Genesis launchpad](https://launchpad.genesis.global/) and sign in. -2. Click on the **Start Cloud Workspace** button. - -3. Wait for Cloud Workspace to start. Then click on the **Open Create** button. +2. The ALM app is listed as a template in the lower part of the screen. Click on the `Open in Create` button for the app. ## Genesis Create Genesis Create enables you to create a Genesis application from scratch in a very short space of time, without writing any code. -In this tutorial, we want to highlight how easily you can take an app created using Genesis Create, and dive into the code to add new features and functions. - -So, we are going to give you the whole ALM app, created using Genesis Create. -And here it is: - -[genesis.create.json](https://github.com/genesiscommunitysuccess/alm-app/blob/master/.genx/genesis.create.json) - - -1. Copy or download this file onto your PC. (When you view the file, you can click on the three dots at the top right to download the raw file.) - -2. In Genesis Create, click on the three dots in the top right of the screen, then select **Load**. - -3. Select the JSON file. This automatically uploads and populates all the required fields for the app. +:::tip +You can find the [JSON file for the app](https://github.com/genesiscommunitysuccess/alm-app/blob/master/.genx/genesis.create.json) on github if you want to work with the project in your own IDE. +::: -### Looking at your app in Genesis Create In short, Genesis Create enables you to: - select the components you need for your app @@ -58,60 +45,52 @@ In short, Genesis Create enables you to: These stages are all set out at the top left of the Create window. -You can use the **Next** and **Back** buttons to move back and forward through the steps. +You can use the `Next` and `Back` buttons to move back and forward through the steps. :::tip Feel free to look into each step and see what has been set up. -Once you have done this, click on the **Next** until you reach the Summary page. +Once you have done this, click on the `Next` until you reach the Summary page. ::: ### Running and building -Make sure you are on the Summary page of Genesis Create. Click on the **Open in Genesis Cloud Workspace** tab, then on the **Open in Genesis Cloud Workspace** button. +Make sure you are on the Summary page of Genesis Create. Click on the `Open in Genesis Cloud Workspace` tab, then on the `Open in Genesis Cloud Workspace` button. This generates a project and opens an IDE in the Cloud Workspace. -You can now build and run the app. - -1. Click on the menu icon to the left and select **View** => **Command Palette**. - -![](/img/view-palette.png) - -2. To see the list of available commands, type **Genesis:**. Then select **Genesis: Unpack project** to display a list of available projects. +You can browse through the project that has been generated by Genesis Create. -![](/img/unpack-project.png) +- The `client` subdirectory contains a fully working web application for the front end of our application. +- The `server` subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back end of the application. -3. Select the appropriate project to open. After a moment, this displays a list of projects, and yours should be on top. The filename is the app name you specified at the beginning, plus a date and time stamp. -![](/img/select-project.png) +You can now build and run the app. -4. Click on your project to open it.

-Now you can browse through the project that has been generated by Genesis Create. +1. Click on the menu icon to the left and select `View -> Command Palette`. -- The **client** subdirectory contains a fully working web application for the front end of our application. -- The **server** subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back-end of the application. +![](/img/view-palette.png) -5. Select **View** => **Command Palette** and then select **Genesis Build Project**. This starts a full build. When this is complete, you will see the message **BUILD SUCCESSFUL** in the terminal tab at the bottom right of the screen. +2. To see the list of available commands, type `Genesis:`. Then select `Genesis Build Project`. This starts a full build. When this is complete, you will see the message `BUILD SUCCESSFUL` in the terminal tab at the bottom right of the screen. -6. Now you can initialise the database and start our server and client processes. Click the **Run and Debug** icon. +3. Now you can initialise the database and start our server and client processes. Click the `Run and Debug` icon. ![](/img/run-debug-icon.png) -7. Select **Bootstrap + Start App**, then click on the **Start** button at the left of the selector. +4. Select `Bootstrap + Start App`, then click on the `Start` button at the left of the selector. ![](/img/bootstrap-start-app.png) This creates the database, loads some data and applies permissions. It takes a few minutes to complete. -8. When all the processes are **UP**, switch to the **PORTS** tab at the bottom. Go to the **Web** line and click on the **Open in Browser** icon. +5. When all the processes are `UP`, switch to the `PORTS` tab at the bottom. Go to the `Web` line and click on the `Open in Browser` icon. ![](/img/ports-web.png) :::tip -If the web port (6060) has not been displayed in the **PORTS** tab automatically, you can add it manually: +If the web port (6060) has not been displayed in the `PORTS` tab automatically, you can add it manually: -Select the blue **Add Port** button and type 6060 in the field that appears. This adds the web port. +Select the blue `Add Port` button and type 6060 in the field that appears. This adds the web port. ::: When the web application is displayed in your browser, you can login using: diff --git a/docs/002_how-to/40_alm-app/02_improving-back-end.mdx b/docs/002_how-to/40_alm-app/02_improving-back-end.mdx index 4ec3e91f9b..363a79666e 100644 --- a/docs/002_how-to/40_alm-app/02_improving-back-end.mdx +++ b/docs/002_how-to/40_alm-app/02_improving-back-end.mdx @@ -21,7 +21,7 @@ If you have entered some trades within the default application, you may have not Let’s add some pro-code to get the position calculation to include the direction of the trade. -1. Go to the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-consolidator.kts**. +1. Go to the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-consolidator.kts`. The original consolidator script should look this (but it probably includes additional comments): @@ -72,7 +72,7 @@ So, we shall now use two consolidator blocks to implement our change. - We can add further consolidators to also take into account `LOAN_TRADE` and `CD_TRADE` movements. -2. Copy the entire code block below and replace the entire contents of the file **ALM-consolidator.kts**. +2. Copy the entire code block below and replace the entire contents of the file `ALM-consolidator.kts`. ```kotlin import global.genesis.gen.dao.enums.ALM.fx_trade.Side @@ -170,7 +170,7 @@ Genesis automatically audits data if you select `Generate Audit Trail` during Cr However, there is often a requirement for a version to appear directly on the trade - this can be done simply with pro-code. -1. Go to the file **ALM/server/ALM-app/src/main/genesis/cfg/ALM-tables-dictionary.kts**. +1. Go to the file `ALM/server/ALM-app/src/main/genesis/cfg/ALM-tables-dictionary.kts`. 2. Ensure the `TRADE_VERSION` field is available on your `FX_TRADE` table, and add a default value to it. Set the default value to 1 so every new trade entering the system starts as version 1. @@ -179,7 +179,7 @@ field("TRADE_VERSION", LONG).notNull().default(1) ``` Next, let’s add the logic to the events. -1. Go to the file **ALM/server/ALM-app/src/main/genesis/scripts/ALM-eventhandler.kts**. +1. Go to the file `ALM/server/ALM-app/src/main/genesis/scripts/ALM-eventhandler.kts`. 2. Go to the `FX_TRADE_MODIFY` section and add the following code to increment the version on modification: diff --git a/docs/002_how-to/40_alm-app/03_improving-front-end.mdx b/docs/002_how-to/40_alm-app/03_improving-front-end.mdx index 28e829358c..229bd0c6bf 100644 --- a/docs/002_how-to/40_alm-app/03_improving-front-end.mdx +++ b/docs/002_how-to/40_alm-app/03_improving-front-end.mdx @@ -16,14 +16,14 @@ import TabItem from '@theme/TabItem'; Now we can tidy up and improve some elements of the GUI to make things look a bit nicer. -The majority of this section will see changes made in the front-end folder, which is found under **ALM/client**. +The majority of this section will see changes made in the front-end folder, which is found under `ALM/client`. ## Fixing capitalisation on front-end grids Genesis Create saves with coding case, rather than visual case. So, to start, let's do something very easy. We shall update some of the names in the front-end grid. -1. Open the file **ALM\client\src\routes\config.ts**. +1. Open the file `ALM\client\src\routes\config.ts`. 2. Change the capitalisation of the tab names (titles) in the GUI: @@ -41,7 +41,7 @@ So, to start, let's do something very easy. We shall update some of the names in OK, we are actually going to change the back-end code here - but don't tell anyone. ::: -1. Open the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-reqrep.kts**. +1. Open the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-reqrep.kts`. 2. Replace the `POSITION` request reply with the `where` clause, as below: @@ -56,7 +56,7 @@ requestReply(POSITION) { ## Formatting on positive/negative numbers The code snippet below will make positive numbers green and negative numbers red. -1. In the folder **ALM\client\src\utils**, create a new file called **util-formatters.ts**. +1. In the folder `ALM\client\src\utils`, create a new file called `util-formatters.ts`. 2. Add the code below to the file. (We'll need to use this function in a few other files later on.): @@ -75,7 +75,7 @@ export function cellStyle(params){ ### Format the columns Now insert this function into some of the column selections. -1. Open the file **ALM\client\src\routes\sourced-trades\loans-manager\loans.column.defs.ts**. +1. Open the file `ALM\client\src\routes\sourced-trades\loans-manager\loans.column.defs.ts`. 2. To include this new function add the following import statement to the top of the file: @@ -106,7 +106,7 @@ The `PAYMENT_AMOUNT` section should now look like this: cellStyle: (params) => cellStyle(params), }, ``` -5. Make similar changes in the file **ALM\client\src\routes\sourced-trades\c-ds-manager\c-ds.column.defs.ts**. +5. Make similar changes in the file `ALM\client\src\routes\sourced-trades\c-ds-manager\c-ds.column.defs.ts`. Adjust the import statement and add the same line to `DEPOSIT_AMOUNT` and `MATURITY_AMOUNT`: @@ -129,7 +129,7 @@ import { cellStyle } from '../../../utils/util-formatters'; ### Format the positions grid We can also add this function to the positions grid. -1. Open the file **ALM\client\src\routes\fx-blotter\position-grid\position.gridOptions.ts**. +1. Open the file `ALM\client\src\routes\fx-blotter\position-grid\position.gridOptions.ts`. 2. Add the import statement in the same way as you did before: @@ -154,9 +154,9 @@ The block should look like this: ## Improving the Trade Entry/Modify pop ups By default, the trade entry screens in our application are displayed in a vertical list. When we have many fields, this can be difficult to navigate. We can change this through the template. -1. In the folder **ALM\client\src\routes\fx-blotter\fx-trades-manager\`, adjust the forms for creating and updating an FX Trade. +1. In the folder `ALM\client\src\routes\fx-blotter\fx-trades-manager\`, adjust the forms for creating and updating an FX Trade. -Edit both **fx-trades.create.form.schema.ts** and **fx-trades.update.form.schema.ts**, replacing `"type": "VerticalLayout",` with: +Edit both `fx-trades.create.form.schema.ts` and `fx-trades.update.form.schema.ts`, replacing `"type": "VerticalLayout",` with: ```jsx "type": "LayoutVertical2Columns", @@ -175,7 +175,7 @@ This class will subscribe to the new `ALL_POSITIONS` stream. It will transform t It will also dynamically update the column definitions on the grid so that there is a column for each currency. -1. Create your new custom element in a new file: **client/src/components/positions-grid.ts**. Add the content below. +1. Create your new custom element in a new file: `client/src/components/positions-grid.ts`. Add the content below. ```jsx import { customElement, FASTElement, html, ref } from '@microsoft/fast-element'; @@ -297,7 +297,7 @@ export class PositionsGrid extends FASTElement { } ``` -2. Add your new custom element to the **client/src/components/components.ts**. +2. Add your new custom element to the `client/src/components/components.ts`. This ensures that the browser knows how to render it. To do this, add two lines to the top of the file, as shown below: @@ -325,7 +325,7 @@ PositionsGrid; ``` -3. Update your route template in **client/src/routes/fx-blotter/fx-blotter.template.ts**; find the `rapid-layout-item` for `Position`: +3. Update your route template in `client/src/routes/fx-blotter/fx-blotter.template.ts`; find the `rapid-layout-item` for `Position`: ```jsx @@ -356,7 +356,7 @@ FxBlotterRatesGrid; PositionsGrid; ``` -This will use the positions grid we added in the new **positions-grid.ts** file. +This will use the positions grid we added in the new `positions-grid.ts` file. ## Adding a new chart We won't be inputting loan data until we deal with [data from external sources](/how-to/alm-app/ht-alm-ingesting-external/). However, it would be useful to set up currency conversion on the loan pie chart so that it displays all data in a single currency, in this case GBP. @@ -364,9 +364,9 @@ We won't be inputting loan data until we deal with [data from external sources]( We'll do this using the `FX_RATE` table that we created. ### Update the back end -1. Go to the back-end code, inside **ALM/server**. We need to add a new view to provide data for this chart. +1. Go to the back-end code, inside `ALM/server`. We need to add a new view to provide data for this chart. -2. Open the file **ALM\server\ALM-app\src\main\genesis\cfg\ALM-view-dictionary.kts**. +2. Open the file `ALM\server\ALM-app\src\main\genesis\cfg\ALM-view-dictionary.kts`. 3. Add the code below, which defines a view joining `LOAN_TRADE` to the latest `FX_RATE`. @@ -391,7 +391,7 @@ We'll do this using the `FX_RATE` table that we created. } } ``` -4. In the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-dataserver.kts**, add a new query to towards the end of the file. This enables the front end to query this data. +4. In the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-dataserver.kts`, add a new query to towards the end of the file. This enables the front end to query this data. ```jsx query("LOAN_PAYMENTS_GBP", LOAN_PAYMENTS_GBP) { @@ -404,9 +404,9 @@ We'll do this using the `FX_RATE` table that we created. ``` ### Update the front end -1. Go to the front-end code inside **ALM\client**. +1. Go to the front-end code inside `ALM\client`. -2. Open the file **ALM\client\src\routes\sourced-trades\sourced-trades.template.ts** and find the following section: +2. Open the file `ALM\client\src\routes\sourced-trades\sourced-trades.template.ts` and find the following section: ```jsx @@ -419,7 +419,7 @@ We'll do this using the `FX_RATE` table that we created. ``` -4. In the file **ALM\client\src\routes\sourced-trades\loans-by-client-chart\loans-by-client.template.ts**, adjust the `chart-datasource` to use the new data server and field: +4. In the file `ALM\client\src\routes\sourced-trades\loans-by-client-chart\loans-by-client.template.ts`, adjust the `chart-datasource` to use the new data server and field: ```jsx ``` -5. In the file **ALM\client\src\routes\sourced-trades\sourced-trades.template.ts**, add a third chart, showing GBP Equivalent currency exposure from the loans. To do this, add this `rapid layout item` between the loan chart `rapid layout item` and the CD chart `rapid layout item`: +5. In the file `ALM\client\src\routes\sourced-trades\sourced-trades.template.ts`, add a third chart, showing GBP Equivalent currency exposure from the loans. To do this, add this `rapid layout item` between the loan chart `rapid layout item` and the CD chart `rapid layout item`: ```jsx @@ -463,4 +463,4 @@ Then close the region at the end of the Rates `rapid-layout-item` block: :::info Checking your work You can view a final version of the code for the ALM app, including all the modifications outlined in this guide, in the [ALM app repository](https://github.com/genesiscommunitysuccess/alm-app). -::: \ No newline at end of file +::: diff --git a/docs/002_how-to/40_alm-app/04_ingesting-external.mdx b/docs/002_how-to/40_alm-app/04_ingesting-external.mdx index 44dadba214..693ad6972d 100644 --- a/docs/002_how-to/40_alm-app/04_ingesting-external.mdx +++ b/docs/002_how-to/40_alm-app/04_ingesting-external.mdx @@ -24,16 +24,16 @@ In this page, we’ll go through some different methods to ingest data in to the ## Loading example data First, let's look at loading some example static data into our application. -There is a simple command - **Genesis: SendIt** - that loads data to the database. +There is a simple command - `Genesis: SendIt` - that loads data to the database. To start with, we shall load three static data files: `BOOK`, `CLIENT`, and `ENTITY`. -You can find these three files in the **SampleData** folder of the [ALM repo](https://github.com/genesiscommunitysuccess/alm-app/tree/master/server/ALM-app/src/main/genesis/data/SampleData). +You can find these three files in the `SampleData` folder of the [ALM repo](https://github.com/genesiscommunitysuccess/alm-app/tree/master/server/ALM-app/src/main/genesis/data/SampleData). -Once you have copied the content, press **SHIFT** and select **BOOK.csv**, **CLIENT.csv** and **ENTITY.csv**, then right-click and select **Genesis: SendIt** to add the data. +Once you have copied the content, press `SHIFT` and select `BOOK.csv`, `CLIENT.csv` and `ENTITY.csv`, then right-click and select `Genesis: SendIt` to add the data. :::tip -By default, **SendIt** simply adds data. Note that: +By default, `SendIt` simply adds data. Note that: - it will not clear any existing records - it will not overwrite any record that is already in the database @@ -46,21 +46,21 @@ However, there is a lot more you can do with this command. See the [SendIt speci The Genesis Create set-up includes a data pipeline. You can now try to use this to input some data. ### What the pipeline definitions -The code for the pipeline is in **ALM/server/ALM-app/src/main/genesis/scripts/ALM-pipelines.kts**. +The code for the pipeline is in `ALM/server/ALM-app/src/main/genesis/scripts/ALM-pipelines.kts`. -The pipeline has been set up so that when the application is running, a folder called **loadData** is created in **ALM/server/ALM-app/src/main/genesis/data**. +The pipeline has been set up so that when the application is running, a folder called `loadData` is created in `ALM/server/ALM-app/src/main/genesis/data`. -1. The pipeline listens to this folder for any CSV file with the prefix **CDs**. +1. The pipeline listens to this folder for any CSV file with the prefix `CDs`. 2. When it sees a file, it processes it and adds any records to the `CD_TRADE` table. -3. Once processed, the files move into a sub-directory called **.done**, with a timestamp added to the filename. +3. Once processed, the files move into a sub-directory called `.done`, with a timestamp added to the filename. ### Try it out -1. Download the file **CDs.csv** from the **SampleData/data_pipeline_example_file** folder of the [ALM repo](https://github.com/genesiscommunitysuccess/alm-app/tree/master/server/ALM-app/src/main/genesis/data/SampleData/data_pipeline_example_file). +1. Download the file `CDs.csv` from the `SampleData/data_pipeline_example_file` folder of the [ALM repo](https://github.com/genesiscommunitysuccess/alm-app/tree/master/server/ALM-app/src/main/genesis/data/SampleData/data_pipeline_example_file). -2. Paste this file into the **loadData** folder in your app. +2. Paste this file into the `loadData` folder in your app. That's it! The data pipeline will then process the file automatically. @@ -71,7 +71,7 @@ For this exercise, we have set up a rest server that provides Loan Trade data. ### Define the receiving message To call the rest server, we first need to define the receiving message. -1. Create a new file called **Messages.kt** at **ALM\server\ALM-app\src\main\kotlin**. +1. Create a new file called `Messages.kt` at `ALM\server\ALM-app\src\main\kotlin`. 2. Paste the following into the file: @@ -182,7 +182,7 @@ data object Message Now we can add an event to trigger a request to the REST API. -1. Open the file **ALM\server\ALM-app\src\main\genesis\scripts\ALM-eventhandler.kts** and add the following imports to the very top of the file: +1. Open the file `ALM\server\ALM-app\src\main\genesis\scripts\ALM-eventhandler.kts` and add the following imports to the very top of the file: ```kotlin import global.genesis.gen.dao.enums.ALM.fx_trade.TradeStatus @@ -294,7 +294,7 @@ Now that we've added these events, we shall set up some ways to call this. We can do this by adding and defining an EVALUATOR process. -1. Open **ALM\server\ALM-app\src\main\genesis\cfg\ALM-processes.xml** and insert the following code: +1. Open `ALM\server\ALM-app\src\main\genesis\cfg\ALM-processes.xml` and insert the following code: ```kotlin @@ -309,7 +309,7 @@ We can do this by adding and defining an EVALUATOR process. ``` -2. Open **ALM\server\ALM-app\src\main\genesis\cfg\ALM-service-definitions.xml** and add: +2. Open `ALM\server\ALM-app\src\main\genesis\cfg\ALM-service-definitions.xml` and add: ```kotlin @@ -318,7 +318,7 @@ This gives us a new service that the Cron Scheduler can call to trigger the rest To define the Cron Scheduler: -1. In the folder **ALM\server\ALM-app\src\main\genesis\data**, create a new csv file called **CRON_RULE.csv**. +1. In the folder `ALM\server\ALM-app\src\main\genesis\data`, create a new csv file called `CRON_RULE.csv`. 2. Insert the following line: @@ -328,7 +328,7 @@ CRON_EXPRESSION,DESCRIPTION,TIME_ZONE,RULE_STATUS,NAME,USER_NAME,PROCESS_NAME,ME ``` By default, this example will run every 10 minutes. But you are welcome to set the cron schedule as needed. -3. Right click on the file in the Project window and select **Genesis: SendIt** to insert this record into the database. +3. Right click on the file in the Project window and select `Genesis: SendIt` to insert this record into the database. ## Kafka integration @@ -339,20 +339,20 @@ For this exercise, we have set up a Kafka producer which we can connect to for s ### Add implementations and properties To start, we'll need to add some implementations to our application. -1. Open the file **server/ALM-app/build.gradle.kts**, then add the following implementations: +1. Open the file `server/ALM-app/build.gradle.kts`, then add the following implementations: ```kotlin implementation("global.genesis:kafka-genesis:${properties["platformIntegrationVersion"]}") implementation("software.amazon.msk:aws-msk-iam-auth:2.2.0") ``` -2. Then in the file **server/gradle.properties**, add the following property: +2. Then in the file `server/gradle.properties`, add the following property: ```kotlin platformIntegrationVersion=8.4.0 ``` -3. Also add this to the classpath of the ALM_PIPELINE process. Open the file **server/ALM-app/src/main/genesis/cfg/ALM-processes.xml**, then add the following to the ALM_PIPLINE process: +3. Also add this to the classpath of the ALM_PIPELINE process. Open the file `server/ALM-app/src/main/genesis/cfg/ALM-processes.xml`, then add the following to the ALM_PIPLINE process: ```xml ALM-app*,aws-msk-iam-auth* @@ -361,7 +361,7 @@ platformIntegrationVersion=8.4.0 ### Set up source properties We need to set up some properties for our Kafka source. -1. Open the file **server/ALM-app/src/main/genesis/cfg/ALM-system-definition.kts**. +1. Open the file `server/ALM-app/src/main/genesis/cfg/ALM-system-definition.kts`. 2. At the top of the file, add the following import: @@ -383,7 +383,7 @@ import java.net.InetAddress; ### Creating a new pipeline for Kafka -1. Open the file **server/ALM-app/src/main/genesis/scripts/ALM-pipelines.kts**. +1. Open the file `server/ALM-app/src/main/genesis/scripts/ALM-pipelines.kts`. 2. We need to add some imports, and initialise some methods. Add the code below to the beginning of the file: diff --git a/docs/002_how-to/50_ote-app/00_index.mdx b/docs/002_how-to/50_ote-app/00_index.mdx index 26209b3f2d..757e0d3394 100644 --- a/docs/002_how-to/50_ote-app/00_index.mdx +++ b/docs/002_how-to/50_ote-app/00_index.mdx @@ -8,7 +8,7 @@ id: 'ht-ote-intro' Our Orders & Trade Execution (OTE) application demonstrates an order and trading venue. It is centred on a Passive Order Book. -In the application, you can configure multiple assets of two different types (although you can easily extend this to others): **mark as cash** or **future settlement**. +In the application, you can configure multiple assets of two different types (although you can easily extend this to others): `mark as cash` or `future settlement`. - Cash balances are required, per person, to place an order. Once an order is matched, trades are executed and recorded. - Positions are displayed by participant and by open positions. diff --git a/docs/002_how-to/50_ote-app/01_getting-started.mdx b/docs/002_how-to/50_ote-app/01_getting-started.mdx index eb26ee1f1e..08e5470c9f 100644 --- a/docs/002_how-to/50_ote-app/01_getting-started.mdx +++ b/docs/002_how-to/50_ote-app/01_getting-started.mdx @@ -23,27 +23,16 @@ If you haven't received this or don't know your details, contact:

dev.s 1. Go to [Genesis launchpad](https://launchpad.genesis.global/) and sign in. -2. Click on the **Start Cloud Workspace** button. - -3. Wait for Cloud Workspace to start. Then click on the **Open Create** button. +2. The OTE app is listed as a template in the lower part of the screen. Click on the `Open in Create` button for the app. ## Genesis Create Genesis Create enables you to create a Genesis application from scratch in a very short space of time, without writing any code. -In this tutorial, we want to highlight how easily you can take an app created using Genesis Create, and dive into the code to add new features and functions. - -So, we are going to give you the whole OTE app, created using Genesis Create, and here it is: - -[Create_Export_OTE.json](https://github.com/genesiscommunitysuccess/ote-app/tree/master/.genx) - -1. Copy or download this file onto your PC. (When you view the file, you can click on the three dots at the top right to download the raw file.) - -2. In Genesis Create, click on the three dots in the top right of the screen, then select **Load**. - -3. Select the JSON file. This automatically uploads and populates all the required fields for the app. +:::tip +You can find the [JSON file for the app](https://github.com/genesiscommunitysuccess/ote-app/tree/master/.genx) on github if you want to work with the project in your own IDE. +::: -### Looking at your app in Genesis Create In short, Genesis Create enables you to: - select the components you need for your app @@ -56,60 +45,51 @@ In short, Genesis Create enables you to: These stages are all set out at the top left of the Create window. -You can use the **Next** and **Back** buttons to move back and forward through the steps. +You can use the `Next` and `Back` buttons to move back and forward through the steps. :::tip Feel free to look into each step and see what has been set up. -Once you have done this, click on the **Next** until you reach the Summary page. +Once you have done this, click on the `Next` until you reach the Summary page. ::: ### Running and building -Make sure you are on the Summary page of Genesis Create. Click on the **Open in Genesis Cloud Workspace** tab, then on the **Open in Genesis Cloud Workspace** button. +Make sure you are on the Summary page of Genesis Create. Click on the `Open in Genesis Cloud Workspace` tab, then on the `Open in Genesis Cloud Workspace` button. This generates a project and opens an IDE in the Cloud Workspace. -You can now build and run the app. - -1. Click on the menu icon to the left and select **View** => **Command Palette**. - -![](/img/view-palette.png) +You can browse through the project that has been generated by Genesis Create. -2. To see the list of available commands, type **Genesis:**. Then select **Genesis: Unpack project** to display a list of available projects. +- The `client` subdirectory contains a fully working web application for the front end of our application. +- The `server` subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back end of the application. -![](/img/unpack-project.png) - -3. Select the appropriate project to open. After a moment, this displays a list of projects, and yours should be on top. The filename is the app name you specified at the beginning, plus a date and time stamp. - -![](/img/select-project.png) +You can now build and run the app. -4. Click on your project to open it.

-Now you can browse through the project that has been generated by Genesis Create. +1. Click on the menu icon to the left and select `View -> Command Palette`. -- The **client** subdirectory contains a fully working web application for the front end of our application. -- The **server** subdirectory contains the generated Genesis configuration files for each of the microservices that make up the back-end of the application. +![](/img/view-palette.png) -5. Select **View** => **Command Palette** and then select **Genesis Build Project**. This starts a full build. When this is complete, you will see the message **BUILD SUCCESSFUL** in the terminal tab at the bottom right of the screen. +2. To see the list of available commands, type `Genesis:`. Then select `Genesis Build Project`. This starts a full build. When this is complete, you will see the message `BUILD SUCCESSFUL` in the terminal tab at the bottom right of the screen. -6. Now you can initialise the database and start our server and client processes. Click the **Run and Debug** icon. +3. Now you can initialize the database and start our server and client processes. Click the `Run and Debug` icon. ![](/img/run-debug-icon.png) -7. Select **Bootstrap + Start App**, then click on the **Start** button at the left of the selector. +4. Select `Bootstrap + Start App`, then click on the `Start` button at the left of the selector. ![](/img/bootstrap-start-app.png) This creates the database, loads some data and applies permissions. It takes a few minutes to complete. -8. When all the processes are **UP**, switch to the **PORTS** tab at the bottom. Go to the **Web** line and click on the **Open in Browser** icon. +5. When all the processes are `UP`, switch to the `PORTS` tab at the bottom. Go to the `Web` line and click on the `Open in Browser` icon. ![](/img/ports-web.png) :::tip -If the web port (6060) has not been displayed in the **PORTS** tab automatically, you can add it manually: +If the web port (6060) has not been displayed in the `PORTS` tab automatically, you can add it manually: -Select the blue **Add Port** button and type 6060 in the field that appears. This adds the web port. +Select the blue `Add Port` button and type 6060 in the field that appears. This adds the web port. ::: When the web application is displayed in your browser, you can login using: diff --git a/docs/002_how-to/50_ote-app/02_improving-back-end.mdx b/docs/002_how-to/50_ote-app/02_improving-back-end.mdx index fe9cd01566..cbd40e2d16 100644 --- a/docs/002_how-to/50_ote-app/02_improving-back-end.mdx +++ b/docs/002_how-to/50_ote-app/02_improving-back-end.mdx @@ -18,9 +18,9 @@ Here, we shall look into the back-end code and make some useful changes to incre ## Adding a query Now add a new query to your Data Server to make this information available to the front end. -1. Go to the folder **OTE\server\OTE-app\src\main\genesis\scripts**. +1. Go to the folder `OTE\server\OTE-app\src\main\genesis\scripts`. -2. Go to the file **OTE\server\OTE-app\src\main\genesis\scripts\OTE-dataserver.kts** and add the following code [Need to specify where] to define the new query. +2. Go to the file `OTE\server\OTE-app\src\main\genesis\scripts\OTE-dataserver.kts` and add the following code [Need to specify where] to define the new query. This can also be found in a TODO block. @@ -35,7 +35,7 @@ query("ALL_USER_NAMES", USER) { ## Updating the consolidators The code changes listed can also be found in TODO blocks. -1. Go to the file **OTE\server\OTE-app\src\main\genesis\scripts\OTE-consolidator.kts**. +1. Go to the file `OTE\server\OTE-app\src\main\genesis\scripts\OTE-consolidator.kts`. 2. In the `SELL_PARTICIPANT_POSITION_AGG consolidator`, find `sum { quantity } into QUANTITY`. Update it as follows: @@ -72,14 +72,14 @@ where { ## Create a new passive order book eventHandler To handle the Passive Order Book correctly, we are going to do two things: -- create a new **-eventhandler.kts**file with the relevant logic for the Passive Order Book; we provide a large code snippet here that contains the logic -- this makes the `PASSIVE_ORDER_BOOK_INSERT`, `PASSIVE_ORDER_BOOK_MODIFY` and `PASSIVE_ORDER_BOOK_DELETE` events in the **OTE-eventhandler.kts** file unnecessary, so you need to remove them. +- create a new `-eventhandler.kts`file with the relevant logic for the Passive Order Book; we provide a large code snippet here that contains the logic +- this makes the `PASSIVE_ORDER_BOOK_INSERT`, `PASSIVE_ORDER_BOOK_MODIFY` and `PASSIVE_ORDER_BOOK_DELETE` events in the `OTE-eventhandler.kts` file unnecessary, so you need to remove them. To do this: -1. Go to the folder **OTE\server\OTE-app\src\main\genesis\scripts**. Add a file called **OTE-pob-eventhandler.kts**. +1. Go to the folder `OTE\server\OTE-app\src\main\genesis\scripts`. Add a file called `OTE-pob-eventhandler.kts`. -2. Add this newly created file to the OTE_MANAGER. To do this, go to the file **OTE\server\OTE-app\src\main\genesis\cfg\OTE-processes.xml**. +2. Add this newly created file to the OTE_MANAGER. To do this, go to the file `OTE\server\OTE-app\src\main\genesis\cfg\OTE-processes.xml`. In this file, find ``. Replace this with the code below: @@ -87,7 +87,7 @@ In this file, find ` ``` -3. Go to file **OTE\server\OTE-app\src\main\genesis\scripts\OTE-eventhandler.kts** and remove the following code: +3. Go to file `OTE\server\OTE-app\src\main\genesis\scripts\OTE-eventhandler.kts` and remove the following code: ```kotlin eventHandler("PASSIVE_ORDER_BOOK_INSERT", transactional = true) { @@ -124,7 +124,7 @@ eventHandler("PASSIVE_ORDER_BOOK_INSERT", transactional = true } } ``` -4. Go to the file **OTE\server\OTE-app\src\main\genesis\scripts\OTE-pob-eventhandler.kts**. Add the following large code snippet: +4. Go to the file `OTE\server\OTE-app\src\main\genesis\scripts\OTE-pob-eventhandler.kts`. Add the following large code snippet: ```kotlin import global.genesis.gen.dao.enums.OTE.cash_movement.Reason diff --git a/docs/002_how-to/50_ote-app/03_improving-front-end.mdx b/docs/002_how-to/50_ote-app/03_improving-front-end.mdx index a813613ebf..aa0decfa35 100644 --- a/docs/002_how-to/50_ote-app/03_improving-front-end.mdx +++ b/docs/002_how-to/50_ote-app/03_improving-front-end.mdx @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; Now we can tidy up and improve some elements of the GUI to make things look a bit nicer. -The majority of this section is for changes made in the front-end folder, which is found under **OTE/client**. +The majority of this section is for changes made in the front-end folder, which is found under `OTE/client`. ## Enhancing the Grid layout @@ -26,7 +26,7 @@ In this section you will change the existing 2x2 grid layout to a more sophistic - three sections (Participant Positions, Trades and Open Positions) are displayed beneath the Orders grid ### 1. Update the template.ts -Go to **OTE\client\src\routes\orders\orders.template.ts**. Replace the code **inside** the **rapid-layout** tags with the code below: +Go to `OTE\client\src\routes\orders\orders.template.ts`. Replace the code *inside* the `rapid-layout` tags with the code below: ``` @@ -51,7 +51,7 @@ With the next set of steps you will be making a change to allow user names to ap ### 2. Update the form for creating and editing new records -Go to the file **OTE\client\src\routes\balances\cash-movements-manager\cash-movement.create.form.schema.ts**.

+Go to the file `OTE\client\src\routes\balances\cash-movements-manager\cash-movement.create.form.schema.ts`.

Replace the code below: @@ -79,7 +79,7 @@ Replace the code below: } }, ``` -Repeat the above in the file **OTE\client\src\routes\balances\cash-movements-manager\cash-movement.update.form.schema.ts**. +Repeat the above in the file `OTE\client\src\routes\balances\cash-movements-manager\cash-movement.update.form.schema.ts`. ## Simulating intraday and End Of Day processing @@ -94,7 +94,7 @@ In this application, we can simulate automated processes by adding buttons that - closing prices - variation margin -1. Go to the file **OTE\client\src\routes\processes\process-history-manager\process-history.ts** file.

Add the following import code, which creates a connection to the `eventHandler`. +1. Go to the file `OTE\client\src\routes\processes\process-history-manager\process-history.ts` file.

Add the following import code, which creates a connection to the `eventHandler`. Add the following code at the bottom of the list of existing import code: @@ -166,7 +166,7 @@ export class ProcessesProcessHistoryManager extends GenesisElement { } ``` -3. Go to the file **OTE\client\src\routes\processes\process-history-manager\process-history.template.ts**.

+3. Go to the file `OTE\client\src\routes\processes\process-history-manager\process-history.template.ts`.

Remove the following two lines: ```ts