Merge pull request #44 from forseti-security/ui-updates

Merging Branch `ui-updates` (v2.0.0).  FYI: Breaking-Changes for Forseti-Security Versions < v2.23.0.

.gitignore

@@ -1,14 +1,14 @@
 # Ignore build files
 forseti-api/dist-forseti-visualizer-ui
+forseti-api/dist
 
-# Env/Encrypted
+# Examples: Env/Encrypted
 source.env
 source-gwongcloud.env
-clah_source.env
-clah_dockersource.env
 dockersource.env
 asdf.env.enc
 config.json
+start_cloud_sql_proxy.sh
 
 # Keys
 sa-key.json

README.md

@@ -1,5 +1,7 @@
 # Forseti Visualizer
 
+![](.assets/forseti-visualizer-example.gif)
+
 Forseti Visualizer provides a visualization solution, based on [Forseti Security's](https://github.com/forseti-security/forseti-security) Inventorying and Violation modules.  Forseti Visualizer attempts to enable Google Cloud Platform users to better understand their GCP Organization Structure, while providing insights into policy adherence through identification of violations.
 
 ## Overview
@@ -41,7 +43,7 @@ npm run build
 
 ### forseti-api
 
-Navigate to forseti-api/.  Create a source.env file, which will should be sourced and set prior to runtime.  You will need to populate the fields below.  The HANDLE and CHANNEL are leveraged for the IAM Explain functionality.
+Navigate to forseti-api/.  Create a `source.env` file, which will should be sourced to set the appropriate ENV variables prior to runtime.  You will need to populate the fields below.  The HANDLE and CHANNEL are leveraged for the IAM Explain functionality.
 
 ```bash
 # navigate to forseti-api
@@ -52,15 +54,32 @@ cp -R ../forseti-visualizer-ui/dist ../forseti-api/dist-forseti-visualizer-ui
 
 # create source.env file
 cat > source.env << EOF
-export CLOUDSQL_HOSTNAME="[IP HERE]"
-export CLOUDSQL_USERNAME="[YOUR_USER_HERE]"
-export CLOUDSQL_PASSWORD="[YOUR_PASSWORD_HERE]"
+export CLOUDSQL_HOSTNAME="[IP HERE:127.0.0.1]"
+export CLOUDSQL_USERNAME="[YOUR_USER_HERE:root]"
+export CLOUDSQL_PASSWORD="[YOUR_PASSWORD_HERE:]"
 export CLOUDSQL_SCHEMA="forseti_security"
 export FORSETI_SERVER_VM_CHANNEL="[FORSETI-SERVER-VM_IP]:[GRPC_PORT:50051]"
 export FORSETI_DATA_MODEL_HANDLE="[DATA_MODEL_HANDLE_HASH:21254f1de747879237a95cb552e80844]"
 EOF
 ```
 
+You'll also need to seed the project with a `config.json` file under server/config.json.  
+
+```bash
+cat > server/config.json << EOF
+{
+  "host": "0.0.0.0",
+  "port": 8080,
+  "bodyLimit": "100kb",
+  "corsHeaders": ["Link"],
+
+  "oauth2ClientId": "[SERVICE_ACCOUNT_NAME]@apps.googleusercontent.com",
+  "oauth2ClientSecret": "[CLIENT_SECRET]",
+  "oauth2Callback": "http://localhost:8080/auth/google/callback",
+}
+EOF
+```
+
 While still in the "forseti-api/" directory:
 
 ```bash

forseti-api/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

forseti-api/README.md

@@ -4,8 +4,8 @@ The node.js backend for the forseti-visualizer project.  Forseti API serves cont
 
 ## Pre-Requisites
 
-* The hosted solution must have a route to the Cloud SQL database.
-* The hosted solution must have access to the forseti-server via GRPC (port 50051)
+* A database connection using [Cloud SQL Proxy (recommended)](#Cloud-SQL-Proxy).
+* If using IAM Explainer, the hosted solution must have access to the forseti-server GCE VM via a Firewall enabling GRPC traffic (port 50051)
 
 To build and deploy the solution from your local system, please ensure you have the following:
 
@@ -36,19 +36,14 @@ cat > server/config.json << EOF
   "host": "0.0.0.0",
   "port": 8080,
   "bodyLimit": "100kb",
-  "corsHeaders": ["Link"],  
-  "GCLOUD_PROJECT": "[PROJECT_ID]",
-  "DATA_BACKEND": "datastore",  
-  "NODE_ENV": "",
-  "OAUTH2_CLIENT_ID": "[SERVICE_ACCOUNT_NAME]@apps.googleusercontent.com",
-  "OAUTH2_CLIENT_SECRET": "[CLIENT_SECRET]",
-  "OAUTH2_CALLBACK": "http://localhost:8080/auth/google/callback",
-  
-  "SECRET": "[SECRET]"
+  "corsHeaders": ["Link"],
+
+  "oauth2ClientId": "[SERVICE_ACCOUNT_NAME]@apps.googleusercontent.com",
+  "oauth2ClientSecret": "[CLIENT_SECRET]",
+  "oauth2Callback": "http://localhost:8080/auth/google/callback",
 }
 EOF
 
-
 npm install
 source source.env
 # the forseti-api server runs on localhost port 8080
@@ -57,7 +52,7 @@ npm start
 
 ## Deployment - Docker
 
-To get started with Docker, you will need to create a local dockersource.env file with the following content.  (For Docker, do not use double quotes)
+`IF you are using Docker...`, you will need to create a local dockersource.env file with the following content.  (Note: Do not include the double quotes)
 
 ```bash
 cat > dockersource.env << EOF
@@ -76,6 +71,18 @@ export PROJECT_ID="$(gcloud config get-value project -q)"
 docker run --env-file $SOURCE_FILE --rm -d -p 8080:8080 gcr.io/$PROJECT_ID/$IMAGE_NAME
 ```
 
-## Opinions
+## References
 
 * [.jshintrc](https://stackoverflow.com/questions/36318895/vs-code-with-es6) - JS formatting hints
+
+### Cloud SQL Proxy
+
+* [Reference](https://cloud.google.com/sql/docs/mysql/connect-admin-proxy#install)
+
+```bash
+curl -o cloud_sql_proxy https://dl.google.com/cloudsql/cloud_sql_proxy.darwin.amd64
+chmod +x cloud_sql_proxy
+
+INSTANCE_CONNECTION_NAME="forseti-security-1e88:us-central1:forseti-server-db-586f404"
+./cloud_sql_proxy -instances=$INSTANCE_CONNECTION_NAME=tcp:3306
+```