Instructions to run visulizer on remote cluster

README.md

@@ -4,10 +4,58 @@ This is a simple visualizer for use with the Kubernetes API.
 
 ### Usage:
    * First install a Kubernetes or Container Engine Cluster
-   * ```git clone https://github.com/brendandburns/gcp-live-k8s-visualizer.git```
-   * ```kubecfg proxy --www=path/to/gcp-live-k8s-visualizer```
+   * ```git clone https://github.com/saturnism/gcp-live-k8s-visualizer.git```
+   * ```kubectl proxy --www=path/to/gcp-live-k8s-visualizer```
 
 That's it.  The visualizer uses labels to organize the visualization.  In particular it expects that
 
    * pods, replicationcontrollers, and services have a ```name``` label, and pods and their associated replication controller share the same ```name```, and
    * the pods in your cluster will have a ```uses``` label which contains a comma separated list of services that the pod uses.
+
+### Installation on AWS:
+
+   * First install a Kubernetes Cluster
+   * On EC2 instance running the client (kubectl), install a proxy. We will be using HAProxy listening on port 80 for this guide.
+   * ```sudo wget http://www.haproxy.org/download/1.6/src/haproxy-1.6.3.tar.gz```
+   * ```sudo tar -xvf haproxy-1.6.3.tar.gz```
+   * ```cd ./haproxy-1.6.3```
+   * ```sudo make TARGET=linux2628 USE_PCRE=1 USE_OPENSSL=1 USE_ZLIB=1```
+   * Create the following configuration file in /etc/haproxy.cfg:
+
+     ```
+    global
+        daemon
+        maxconn 256
+
+    defaults
+        mode http
+        timeout connect 5000ms
+        timeout client 50000ms
+        timeout server 50000ms
+
+    frontend http-in
+        bind :80
+        default_backend proxy-backend
+
+
+    backend proxy-backend
+        server proxy 127.0.0.1:8001
+   ```
+
+   * Startup the proxy:
+    ```
+    sudo ./haproxy -f /etc/haproxy.cfg
+    ```
+   * Startup kubernetes proxy by doing the following:
+   * Get api server location, username, and password from kubernetes:
+    ```
+   kubectl config view
+   ```
+   * Create kubernetes proxy:
+    ```
+   kubectl proxy --www=path/to/k-visualizer/gcp-live-k8s-visualizer --username=admin --password=<password>  --accept-hosts="" --server="<server>" &
+   ```
+   * Access visualizer via Public IP of EC2 instance on which you created it:
+    ```
+   http://<public ip>/static/
+   ```

examples/nginx.controller.json

@@ -4,6 +4,7 @@
   "metadata":{
     "name":"nginx",
     "labels":{
+      "visualize":"true",
       "name":"nginx"
     }
   },
@@ -15,6 +16,7 @@
     "template":{
       "metadata":{
         "labels":{
+          "visualize":"true",
           "name":"nginx",
           "app": "sample",
           "version": "0.0.1",

examples/nginx.service.json

@@ -4,6 +4,7 @@
   "metadata": {
     "name": "nginx",
     "labels": {
+      "visualize":"true",
       "name": "nginx",
       "app": "sample"
     }
@@ -25,4 +26,4 @@
       "name": "frontend"
     }
   }
-}
+}

index.html

@@ -30,6 +30,8 @@
             <div class="navbar-logo">
               <img src="logotext.svg" id="nav-logo-img" alt="logo">
             </div>
+          </div>
+          <div class="nodesbar">
           </div>
 	    <div class="demo flowchart-demo" id="sheet">
           </div>

jsplumb/jsplumb.css

@@ -130,25 +130,23 @@ body {
 }
 
  #main {  
-  margin-top: 106px;  
+  position: absolute;
   font-size: 80%;    
-  width: 80%;
-  margin-left:auto;
-  margin-right: auto;  
-  height: 600px;
   text-align: center;
-  position: relative;
-  max-width: 1200px;
-  max-height: 1000px;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .demo {
-  position: relative;
-  width:100%;
+  position: absolute;
+  top: 200px;
+  left: 0;
+  right: 0;
+  bottom: 0;
   background-color:white;    
   overflow:auto;  
-  margin-bottom:25px;
-  height: 600px;
 }
 
 .explanation {