Added docs for Thundernetes UI

docs/FAQ.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Frequently Asked Questions
-nav_order: 13
+nav_order: 14
 ---
 
 # Frequently Asked Questions

docs/contributing.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Contributing
-nav_order: 11
+nav_order: 12
 ---
 
 # Contributing Guide

docs/development.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Development
-nav_order: 12
+nav_order: 13
 ---
 
 # Development

docs/howtos/README.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: How to's
-nav_order: 9
+nav_order: 10
 has_children: true
 ---
 

docs/thundernetesui/README.md

@@ -0,0 +1,33 @@
+---
+layout: default
+title: Thundernetes UI
+nav_order: 9
+has_children: true
+---
+
+
+# Thundernetes UI
+
+Currently we are developing [Thundernetes UI](https://github.com/PlayFab/thundernetes-ui), a front end application to manage game servers running in one or more Thundernetes clusters. To be able to connect to them, be sure to deploy the [GameServer API](https://github.com/PlayFab/thundernetes/tree/main/cmd/gameserverapi) on each cluster.
+
+## Check all of your clusters in the same place
+
+You can see a summary of what's going on in all your clusters.
+
+![Home page](./images/thundernetes_ui_home.png "Home page")
+
+## Manage the builds on each cluster
+
+Check the builds you have on each cluster and their current status. You can also create a new one, either from scratch, or by cloning one from any cluster!
+
+![Cluster view](./images/thundernetes_ui_cluster.png "Cluster view")
+
+![Create build view](./images/thundernetes_ui_cluster_create_build.png "Create build view")
+
+## Manage each build
+
+You can check each build separately and see it's status and specs, you can modify the standingBy and max values, allocate individual game servers for testing, and see a list of all the game servers running.
+
+![Build view - Specs](./images/thundernetes_ui_build_specs.png "Build view - Specs")
+
+![Build view - GameServers](./images/thundernetes_ui_build_gameservers.png "Build view - GameServers")

docs/thundernetesui/apiauth.md

@@ -0,0 +1,82 @@
+---
+layout: default
+title: How to authenticate to an API
+parent: Thundernetes UI
+nav_order: 2
+---
+
+# How to authenticate to an API
+
+Kubernetes allows you to secure the Thundernetes' GameServer API [using an Ingress](https://playfab.github.io/thundernetes/howtos/serviceingress.html), if you do this you will need a way to provide the certificates from this client. Currently the [Thundernetes UI](https://github.com/PlayFab/thundernetes-ui) is conceived as a simple React application, and because of this it's not safe to store credentials in the app. A very easy to implement alternative is to use a proxy that contains the credentials, in the following sections we show an example for deploying a reverse proxy using the official [Nginx Docker image](https://hub.docker.com/_/nginx).
+
+## Architecture
+
+The idea is to use a proxy between the UI and Thunernetes' API, so the UI makes the requests to the proxy, and the proxy to the Thundernetes clusters, this way the credential can be stored in the proxy without them being exposed through the browser. You can also use a single proxy for multiple clusters, using Nginx to act as a reverse proxy.
+
+![Graphic describing the architecture of Thundernetes UI using a proxy](./images/thundernetes_ui_proxy.png "Graphic describing the architecture of Thundernetes UI using a proxy")
+
+## How to configure your own proxy with mTLS
+
+All we need to do is to write a configuration file for Nginx and a Dockerfile to create a container with the credentials. Lets create a configuration file called ```default.conf``` and add the following:
+
+```nginx
+server{
+ listen 80;
+
+ location /tls/ {
+ proxy_pass https://{your_endpoint_with_mTLS}/;
+ proxy_ssl_certificate /etc/ssl/private/client.crt;
+ proxy_ssl_certificate_key /etc/ssl/private/client.key;
+ proxy_ssl_trusted_certificate /etc/ssl/private/ca.crt;
+ proxy_ssl_verify on;
+ }
+
+}
+```
+
+This file uses ```proxy_pass``` to define that every request to ```http://{proxy_ip}/tls/``` will be forwarded to ```https://{your_endpoint_with_mTLS}/```, the trailing forward slashes are necessary so the rest of the URI is forwarded too. It also defines the key pair that the client, this proxy, uses to authenticate, for this ```proxy_ssl_certificate``` and ```proxy_ssl_certificate_key``` are used. Finally, you use ```proxy_ssl_trusted_certificate``` to define a trusted Certificate Authority (CA), so every certificate signed with that will be trusted, and also ```proxy_ssl_verify``` to toggle the validation for the certificates that come from the server.
+
+Now create a Dockerfile with the following, be sure to have the files you need in the same directory:
+
+```Dockerfile
+FROM nginx:1.23-alpine
+RUN rm /etc/nginx/conf.d/default.conf
+COPY default.conf /etc/nginx/conf.d/
+COPY client.crt /etc/ssl/private/
+COPY client.key /etc/ssl/private/
+COPY ca.crt /etc/ssl/private/
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]
+
+```
+
+In this you pull the Nginx Docker image, add the configuration, and the certificates. Now you can build the image:
+
+```
+docker build -t nginx-proxy:0.1 .
+```
+
+And run it:
+
+```
+docker run -d -p 80:80 nginx-proxy:0.1
+```
+
+## Connect Thundernetes UI to the proxy
+
+Simply add the proxy IP, with the correct URI, to the config file before starting the UI:
+
+```js
+var clusters = {
+ "with_tls": {
+ "api": "http://{proxy_IP}/api/v1/",
+ "allocate": "http://{allocate_api}:5000/api/v1/allocate",
+ }
+}
+```
+
+> **_NOTE_**: This tutorial only shows how to connect to the GameServer API with mTLS, but the steps are exactly the same if you added mTLS to the allocate endpoint.
+
+## Other authentication methods
+
+Nginx also allows you to add headers using the ```proxy_set_header``` directive, so any other type of authentication that uses headers to send credentials are easily supported by this method. 

docs/thundernetesui/howtouse.md

@@ -0,0 +1,47 @@
+---
+layout: default
+title: How to use Thundernetes UI
+parent: Thundernetes UI
+nav_order: 1
+---
+
+# How to use Thundernetes UI
+
+## How to config the app
+The app needs a file called ```config.js``` with the endpoints to the GameServer API and to the Thundernetes manager (this is only to allocate game servers). Inside the file you need to define a variable called ```clusters``` with the following structure:
+
+```js
+var clusters = {
+ "cluster1": {
+ "api": "http://{cluster1_api_IP}:5001/api/v1/",
+ "allocate": "http://{cluster1_manager_IP}:5000/api/v1/allocate"
+ },
+ "cluster2": {
+ "api": "http://{cluster2_api_IP}:5001/api/v1/",
+ "allocate": "http://{cluster2_manager_IP}:5000/api/v1/allocate"
+ }
+}
+ ```
+
+## How to run locally
+If you want to run the project locally, first you need to install [Node.js](https://nodejs.org/en/download/). Then clone the project:
+
+```
+git clone https://github.com/PlayFab/thundernetes-ui.git
+```
+
+And install the dependencies:
+
+```
+npm install
+```
+
+After this, you can create the ```config.js``` file inside the public folder, then you can simply run the app with the ```npm start``` command. This will start a server and open a browser to ```http://localhost:3000```.
+
+## How to run using the Docker image
+
+You can also run the Docker container image, all you have to do is mount a volume to pass your ```config.js``` file to the app, you can do this like this:
+
+```
+docker run -d -p 80:80 -v [path to your config.js]:/usr/share/nginx/html/config.js ghcr.io/playfab/thundernetes-ui:[current tag]
+```

docs/troubleshooting/README.md

@@ -1,7 +1,7 @@
 ---
 layout: default
 title: Troubleshooting
-nav_order: 10
+nav_order: 11
 has_children: true
 ---