Pretty up the demo a little.

Use images and some better formatting.  Also add scripts to help prevent typos.

This based on an improved version done by Julia Ferraioli.  She came up with the cool images.

update-demo/0-run-web-proxy.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+echo "Running local proxy to Kubernetes API Server.  Run this in a "
+echo "separate terminal or run it in the background."
+echo
+echo "    http://localhost:8001/static/"
+echo
+../../cluster/kubecfg.sh -proxy -www local/

update-demo/1-create-replication-controller.sh

@@ -0,0 +1,24 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+if [ -z "$DOCKER_HUB_USER" ] ; then
+  echo "Please set DOCKER_HUB_USER to your Docker hub account"
+  exit 1
+fi
+
+set -x
+
+../../cluster/kubecfg.sh -p 8080:80 run $DOCKER_HUB_USER/update-demo:nautilus 2 update-demo

update-demo/2-scale.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+NEW_SIZE=${1:-4}
+
+set -x
+
+../../cluster/kubecfg.sh resize update-demo $NEW_SIZE

update-demo/3-rolling-update.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+if [ -z "$DOCKER_HUB_USER" ] ; then
+  echo "Please set DOCKER_HUB_USER to your Docker hub account"
+  exit 1
+fi
+
+NEW_IMAGE=${1:-kitten}
+
+set -x
+
+../../cluster/kubecfg.sh -image $DOCKER_HUB_USER/update-demo:$NEW_IMAGE -u 10s rollingupdate update-demo

update-demo/4-down.sh

@@ -0,0 +1,20 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -x
+
+../../cluster/kubecfg.sh stop update-demo
+../../cluster/kubecfg.sh rm update-demo

update-demo/README.md

@@ -27,7 +27,7 @@ This example assumes that you have forked the repository and [turned up a Kubern
 
 This example also assumes that you have [Docker](http://docker.io) installed on your local machine.
 
-It also assumes that ```$DOCKER_USER``` is set to your docker user id.
+It also assumes that `$DOCKER_HUB_USER` is set to your Docker user id.  We use this to upload the docker images that are used in the demo.
 
 You may need to open the firewall for port 8080 using the [console][cloud-console] or the `gcutil` tool. The following command will allow traffic from any source to instances tagged `kubernetes-minion`:
 
@@ -37,57 +37,66 @@ $ gcutil addfirewall --allowed=tcp:8080 --target_tags=kubernetes-minion kubernet
 
 ### Step One: Build the image
 
-    $ cd kubernetes/examples/update-demo/image
-    $ docker build -t $DOCKER_USER/data .
-    $ docker push $DOCKER_USER/data
+```shell
+$ cd kubernetes/examples/update-demo
+$ ./build-images.sh
+```
 
-### Step Two: Run the controller
-Now we will turn up two replicas of that image.  They all serve on port 8080, mapped to internal port 80
+### Step Two: Turn up the UX for the demo
 
-    $ cd kubernetes
-    $ cluster/kubecfg.sh -p 8080:80 run $DOCKER_USER/data 2 dataController
+```shell
+$ ./0-run-web-proxy.sh &
+```
 
-### Step Three: Turn up the UX for the demo
-In a different terminal:
+This can sometimes spew to the output so you could also run it in a different terminal.
 
-    $ cd kubernetes
-    $ cluster/kubecfg.sh -proxy -www examples/update-demo/local/
+Now visit the the [demo website](http://localhost:8001/static).  You won't see anything much quite yet.
 
-Now visit the the [demo website](http://localhost:8001/static/index.html).  You should see two light blue squares with pod IDs and ip addresses.
+### Step Three: Run the controller
+Now we will turn up two replicas of an image.  They all serve on port 8080, mapped to internal port 80
+
+```shell
+$ ./1-create-replication-controller.sh
+```
+
+After these pull the image (which may take a minute or so) you'll see a couple of squares in the UI detailing the pods that are running along with the image that they are serving up.  A cute little nautilus.
 
 ### Step Four: Try resizing the controller
+
 Now we will increase the number of replicas from two to four:
 
-    $ cd kubernetes
-    $ cluster/kubecfg.sh resize dataController 4
+```shell
+$ ./2-scale.sh
+```
 
 If you go back to the [demo website](http://localhost:8001/static/index.html) you should eventually see four boxes, one for each pod.
 
 ### Step Five: Update the docker image
-We will now update the docker image to serve a different color.
+We will now update the docker image to serve a different image by doing a rolling update to a new Docker image.
 
-    $ cd kubernetes/examples/update-demo/image
-    $ ${EDITOR} data.json
-
-Edit the ```color``` value so that it is a new color.  For example:
-```js
-{
-  "color": "#F00"
-}
+```shell
+$ ./3-rolling-update
 ```
-Will set the color to red.
+The rollingUpdate command in kubecfg will do 2 things:
 
-Once you are happy with the color, build a new image:
+1. Update the template in the replication controller to the new image (`$DOCKER_HUB_USER/update-demo:kitten`)
+2. Kill each of the pods one by one.  It'll let the replication controller create new pods to replace those that were killed.
 
-    $ docker build -t $DOCKER_USER/data .
-    $ docker push $DOCKER_USER/data
+Watch the UX, it will update one pod every 10 seconds until all of the pods have the new image.
 
-### Step Six: Roll the update out to your servers
-We will now update the servers that are running out in your cluster.
+### Step Five: Bring down the pods
 
-    $ cd kubernetes
-    $ cluster/kubecfg.sh -u=30s rollingupdate dataController
+```shell
+$ ./4-down.sh
+```
 
-Watch the UX, it will update one pod every 30 seconds until all of the pods have the new color.
+This will first 'stop' the replication controller by turning the target number of replicas to 0.  It'll then delete that controller.
 
 [cloud-console]: https://console.developer.google.com
+
+### Image Copyright
+
+Note that he images included here are public domain.
+
+* [kitten](http://commons.wikimedia.org/wiki/File:Kitten-stare.jpg)
+* [nautilus](http://commons.wikimedia.org/wiki/File:Nautilus_pompilius.jpg)

update-demo/image/Dockerfile

@@ -1,7 +0,0 @@
-FROM dockerfile/nginx
-
-ADD data.json /usr/share/nginx/html/data.json
-ADD default /etc/nginx/sites-available/default
-RUN chmod a+r /usr/share/nginx/html/data.json
-
-CMD ["nginx"]

update-demo/image/data.json

@@ -1,3 +0,0 @@
-{
-  "color": "#0FF"
-}

update-demo/image/default

@@ -1,23 +0,0 @@
-server {
-        listen 80 default_server;
-        listen [::]:80 default_server ipv6only=on;
-
-        root /usr/share/nginx/html;
-        index index.html index.htm;
-
-        # Make site accessible from http://localhost/
-        server_name localhost;
-
-        location / {
-                try_files $uri $uri/ =404;
-                expires           0;
-    		add_header        Cache-Control private;
-
-		if ($request_method = 'GET') {
- 		   add_header 'Access-Control-Allow-Origin' '*';
-        	   add_header 'Access-Control-Allow-Credentials' 'true';
-        	   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
-        	   add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
-     		}
-         }
-}

update-demo/images/base/Dockerfile

@@ -0,0 +1,22 @@
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM dockerfile/nginx
+
+ADD default /etc/nginx/sites-available/default
+
+ONBUILD ADD html /usr/share/nginx/html
+ONBUILD RUN chmod -R a+r /usr/share/nginx/html
+
+CMD ["nginx"]

update-demo/images/base/default

@@ -0,0 +1,37 @@
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+server {
+  listen 80 default_server;
+  listen [::]:80 default_server ipv6only=on;
+
+  root /usr/share/nginx/html;
+  index index.html index.htm;
+
+  # Make site accessible from http://localhost/
+  server_name localhost;
+
+  location / {
+    try_files $uri $uri/ =404;
+    expires           0;
+    add_header        Cache-Control private;
+
+    if ($request_method = 'GET') {
+      add_header 'Access-Control-Allow-Origin' '*';
+      add_header 'Access-Control-Allow-Credentials' 'true';
+      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+      add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
+    }
+  }
+}

update-demo/images/build-images.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# This script will build and push the images necessary for the demo.
+
+if (( $# != 1 )); then
+  echo "Usage: $0 <docker hub user name>"
+  exit 1
+fi
+
+DOCKER_USER=$1
+
+set -x
+
+docker build -t update-demo-base base
+docker build -t $DOCKER_USER/update-demo:kitten kitten
+docker build -t $DOCKER_USER/update-demo:nautilus nautilus
+
+docker push $DOCKER_USER/update-demo

update-demo/images/kitten/Dockerfile

@@ -0,0 +1,15 @@
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM update-demo-base

update-demo/images/kitten/html/data.json

@@ -0,0 +1,3 @@
+{
+  "image": "kitten.jpg"
+}

update-demo/images/nautilus/Dockerfile

@@ -0,0 +1,15 @@
+# Copyright 2014 Google Inc. All rights reserved.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+FROM update-demo-base

update-demo/images/nautilus/html/data.json

@@ -0,0 +1,3 @@
+{
+  "image": "nautilus.jpg"
+}

update-demo/local/index.html

@@ -13,17 +13,23 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 -->
+
 <html ng-app>
 <head>
-<script src="angular.min.js"></script>
-<script src="script.js"></script>
-<link rel="stylesheet" href="style.css"></link>
+  <script src="angular.min.js"></script>
+  <script src="script.js"></script>
+  <link rel="stylesheet" href="style.css"></link>
 </head>
 <body ng-controller="ButtonsCtrl">
-    <div ng-repeat="server in servers" class="server" style="background: #FFF">
-      <b>{{server.id}}</b>
-      <div class="img" style="background: {{server.color}};"> </div>
-      <a href="http://{{server.ip}}:8080/data.json">{{server.ip}}</a>
-    </div>
+  <div ng-repeat="server in servers" class="pod">
+    <img src="http://{{server.ip}}:8080/{{server.image}}" height="100px" width="100px" />
+    <b>ID:</b> {{server.id}}<br>
+    <b>Host:</b> <a href="http://{{server.ip}}:8080/data.json">{{server.host}}</a><br>
+    <b>Image:</b> {{server.dockerImage}}<br>
+    <b>Labels:</b>
+    <ul>
+      <li ng-repeat="(key,value) in server.labels">{{key}}={{value}}</li>
+    </ul>
+  </div>
 </body>
 </html>

update-demo/local/script.js

@@ -16,72 +16,77 @@ limitations under the License.
 
 var base = "http://localhost:8001/api/v1beta1/";
 
-var updateColor = function($http, server) {
-    $http.get("http://" + server.ip + ":8080/data.json")
+var updateImage = function($http, server) {
+  $http.get("http://" + server.ip + ":8080/data.json")
     .success(function(data) {
-	    server.color = data.color;
-	    console.log(data);
-	})
+      server.image = data.image;
+      console.log(data);
+    })
     .error(function(data) {
-            server.color = "#000";
-	    console.log(data);
-	});
+      server.image = ""
+      console.log(data);
+    });
 };
 
 var updateServer = function($http, server) {
-	$http.get(base + "pods/" + server.id)
-	.success(function(data) {
-		console.log(data);
-		server.ip = data.currentState.hostIP;
-		updateColor($http, server);
-	    })
-	.error(function(data) {
-		console.log(data);
-	    });
+  $http.get(base + "pods/" + server.id)
+    .success(function(data) {
+      console.log(data);
+      server.ip = data.currentState.hostIP;
+      server.labels = data.labels;
+      server.host = data.currentState.host.split('.')[0]
+      server.dockerImage = data.currentState.info["update-demo-container"].Config.Image
+      updateImage($http, server);
+    })
+    .error(function(data) {
+      console.log(data);
+    });
 };
 
 var updateData = function($scope, $http) {
-    var servers = $scope.servers
-    for (var i = 0; i < servers.length; ++i) {
-	var server = servers[i];
-	updateServer($http, server);
-    }
+  var servers = $scope.servers
+  for (var i = 0; i < servers.length; ++i) {
+    var server = servers[i];
+    updateServer($http, server);
+  }
 };
 
 var ButtonsCtrl = function ($scope, $http, $interval) {
-    $scope.servers = [];
-    update($scope, $http);
-    $interval(angular.bind({}, update, $scope, $http), 2000);
+  $scope.servers = [];
+  update($scope, $http);
+  $interval(angular.bind({}, update, $scope, $http), 2000);
 };
 
 var getServer = function($scope, id) {
-    var servers = $scope.servers;
-    for (var i = 0; i < servers.length; ++i) {
-	if (servers[i].id == id) {
-	    return servers[i];
-	}
+  var servers = $scope.servers;
+  for (var i = 0; i < servers.length; ++i) {
+    if (servers[i].id == id) {
+      return servers[i];
     }
-    return null;
+  }
+  return null;
 };
 
 var update = function($scope, $http) {
-    if (!$http) {
-	console.log("No HTTP!");
-	return;
-    }
-    $http.get(base + "pods")
-      .success(function(data) {
-        console.log(data);
-        var newServers = [];
-	for (var i = 0; i < data.items.length; ++i) {
-	    var server = getServer($scope, data.items[i].id);
-	    if (server == null) {
-		server = { "id": data.items[i].id };
-	    }
-	    newServers.push(server);
-	}
-	$scope.servers = newServers;
-        updateData($scope, $http)
+  if (!$http) {
+    console.log("No HTTP!");
+    return;
+  }
+  $http.get(base + "pods")
+    .success(function(data) {
+      console.log(data);
+      var newServers = [];
+      for (var i = 0; i < data.items.length; ++i) {
+        var server = getServer($scope, data.items[i].id);
+        if (server == null) {
+          server = { "id": data.items[i].id };
+        }
+        newServers.push(server);
+      }
+      $scope.servers = newServers;
+      updateData($scope, $http)
+    })
+    .error(function(data) {
+      console.log("ERROR: " + data);
     })
-    .error(function(data) { console.log("ERROR: " + data); })
 };

update-demo/local/style.css

@@ -14,19 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.img {
+img {
   height: 100px;
   width: 100px;
-  background-size: 100px 100px; 
-  margin-left: 25px;
+  float: right;
+  background-size: 100px 100px;
+  background-color: black;
+  margin-left: 10px;
+  border: none;
 }
 
-.server {
+ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.pod {
   font-family: Roboto, Open Sans, arial;
-  width: 150px;
-  height: 150px;
   border: 1px solid black;
+  border-radius: 5px;
+  padding: 10px;
   margin: 10px;
   display: inline-block;
-  padding: 3px;
+  background-color: #D1D1D1;
 }