Adds cli output to Try Habitat feature

www/source/javascripts/try.js

@@ -21,8 +21,11 @@
         return $.get("/try/responses/" + name + ".txt");
     }
 
-    function success() {
+    function success(display) {
         $("#success .button").removeClass("disabled").addClass("success");
+        if(display === "hide") {
+          $("#shell-cli").hide();
+        }
     }
 
     var editor;
@@ -99,8 +102,8 @@
             if (args[0] === "start") {
 
                 // Start a service
-                if (args[1] === "habitat/postgresql") {
-                  getResponse("hab-start-habitat-postresql").then(function (txt) {
+                if (args[1] === "core/redis") {
+                  getResponse("hab-start-service").then(function (txt) {
                       inStudio = true;
                       callback(format(txt));
                       shell.setPrompt(studioPrompt);
@@ -114,7 +117,7 @@
 
                 // Adding a leader/follower topology
                 } else if (args[1] + ' ' + args[2] === "-t leader") {
-                  if (args[3] === 'habitat/postgresql') {
+                  if (args[3] === 'core/redis') {
 
                     // adding the first/leader node
                     if ((args[4] == null) && (step === 6)) {
@@ -127,11 +130,11 @@
                               callback(studioPrompt);
                           });
 
-                          if (step === 6) { success(); }
+                          if (step === 6) { success('hide'); }
                       });
 
                     // adding an additional/follower node
-                    } else if (args[4] + ' ' + args[5] === "--gossip-peer 172.17.0.4:9634") {
+                    } else if (args[4] + ' ' + args[5] === "--peer 172.17.0.4") {
                       getResponse("hab-start-additional-node").then(function (txt) {
                           inStudio = true;
                           callback(format(txt));
@@ -140,8 +143,15 @@
                               promptCounter += 1;
                               callback(studioPrompt);
                           });
-
-                          if (step === 7) { success(); }
+                          //change button text to reflect resulting status
+                          //show badge on window buttons
+                          //show full updated cli output
+                          if (step === 7) {
+                            success();
+
+                            $(".node-status").html("connected").parent().addClass("updated");
+                            $(".button-badge, .full-output").show();
+                          }
                       });
 
                     // they could be on step 6 or 7 since the command/subcommand is the same
@@ -171,8 +181,8 @@
             } else if (args[0] === "sup") {
 
               // Ask what is configurable
-              if (args.join(" ") === "sup config habitat/postgresql") {
-                getResponse("hab-sup-config-habitat-postgresql").then(function (txt) {
+              if (args.join(" ") === "sup config core/redis") {
+                getResponse("hab-sup-config-service").then(function (txt) {
                     inStudio = true;
                     callback(format(txt));
                     shell.setPrompt(studioPrompt);
@@ -192,10 +202,10 @@
               };
 
             // hab inject (alias)
-            } else if (args[0] === "inject") {
+            } else if (args[0] === "config") {
               // inject the gossip.toml into the group
-              if (args.join(" ") === "inject postgresql.default 1 /tmp/gossip.toml --peers 172.17.0.4:9634") {
-                getResponse("hab-inject-gossip-postgresql").then(function (txt) {
+              if (args.join(" ") === "config apply redis.default 1 /tmp/gossip.toml --peers 172.17.0.4") {
+                getResponse("hab-config-apply").then(function (txt) {
                     inStudio = true;
                     callback(format(txt));
                     shell.setPrompt(studioPrompt);
@@ -204,12 +214,20 @@
                         callback(studioPrompt);
                     });
                     // step is pulled from the progress bar attribute in the DOM
-                    if (step === 5) { success(); }
+                    if (step === 5) {
+                      success();
+
+                      //change button text to reflect resulting status
+                      //show badge on window buttons
+                      //show full updated cli output
+                      $(".node-status").html("changed applied").parent().addClass("updated");
+                      $(".button-badge, .full-output").show();
+                    }
                 });
 
               // show the 'hab inject' help
               } else {
-                getResponse("hab-inject-help").then(function (txt) {
+                getResponse("hab-config-apply-help").then(function (txt) {
                     callback(format(txt));
                 });
               };
@@ -281,14 +299,14 @@
     });
 
     // Configuration change through environment variable
-    shell.setCommandHandler('HAB_POSTGRESQL="port=5433"', {
+    shell.setCommandHandler('HAB_REDIS="tcp-backlog=128"', {
         exec: function(cmd, args, callback) {
 
             if (args[0] === "hab") {
 
               // Reconfigure service via environment variable
-              if (args.join(" ") === "hab start habitat/postgresql") {
-                getResponse("port-hab-start-habitat-postgresql").then(function (txt) {
+              if (args.join(" ") === "hab start core/redis") {
+                getResponse("hab-start-env-var").then(function (txt) {
                     inStudio = true;
                     callback(format(txt));
                     shell.setPrompt(studioPrompt);
@@ -301,7 +319,7 @@
                 });
 
             // if user tries to start anything else, then show the 'hab start' help
-            } else if ((args[1] === "start") && (args[2] !== "habitat/postgresql")) {
+          } else if ((args[1] === "start") && (args[2] !== "core/redis")) {
               getResponse("hab-start-help").then(function (txt) {
                   callback(format(txt));
               });
@@ -346,9 +364,22 @@
 
         editor.on("changes", function (instance, changes) {
             if (step === 4 &&
-                instance.getValue().match(/max_connections\s\=\s*300\s*/)) {
+                instance.getValue().match(/tcp-backlog\s\=\s*128\s*/)) {
                 success();
             }
         });
     }
+
+    // Switching windows when adding services
+    $(".window-buttons .button").click(function(event) {
+        var targetID = $(this).attr("data-target");
+
+        // set button classes
+        $(".window-buttons .button").removeClass("active");
+        $(this).addClass("active");
+
+        // show/hide windows
+        $(".window-node").hide();
+        $("#" + targetID).show();
+    });
 }());

www/source/stylesheets/_global.scss

@@ -7,6 +7,7 @@
 //  2. Code Overrides
 //  3. Buttons
 //  4. Typography
+//  5. Links
 
 
 // 1. Global
@@ -50,6 +51,7 @@
     display: inline-block;
     font-style: italic;
     font-weight: 700;
+    margin-bottom: 0;
     margin-left: rem-calc(-30);
     padding: rem-calc(10) rem-calc(30);
   }
@@ -105,3 +107,11 @@ code {
 h2:not(:first-child) {
   margin-top: rem-calc(40);
 }
+
+// 5. Links
+// ---------
+
+.back-link {
+  display: block;
+  margin-top: rem-calc(10);
+}

www/source/stylesheets/_try.scss

@@ -32,7 +32,8 @@ code {
   display: inline-block;
 }
 
-#shell-panel {
+#shell-panel,
+.shell-panel {
   background-color: black;
   color: #c7c7c7;
   font-family: 'Source Code Pro', monospace;
@@ -69,3 +70,50 @@ code {
 .ansi-bright-magenta { color: rgb(255, 85, 255); }
 .ansi-bright-cyan { color: rgb(85, 255, 255); }
 .ansi-bright-white { color: rgb(255, 255, 255); }
+
+.window-buttons {
+  ul {
+    margin: 0;
+    li {
+      display: inline-block;
+      list-style: none;
+      margin-right: rem-calc(10);
+      position: relative;
+
+      a.active {
+        background-color: $hab-blue !important;
+      }
+
+      a.updated {
+        background-color: $hab-orange;
+      }
+
+      a.active:hover {
+        background-color: darken($hab-blue, 6);
+      }
+
+      .button-badge {
+        background-color: $hab-green;
+        border: 1px solid $hab-green-dark;
+        border-radius: 100%;
+        box-shadow: 0 0 4px $hab-green-dark;
+        display: none;
+        height: 10px;
+        position: absolute;
+        right: -5px;
+        top: -5px;
+        width: 10px;
+      }
+    }
+  }
+}
+
+.shell-panel {
+  margin-bottom: 2.5rem;
+}
+
+pre.full-output {
+  @extend .ansi-bright-cyan;
+  display: none;
+  margin-top: rem-calc(-32);
+}

www/source/try/10.html.slim

@@ -3,29 +3,21 @@ title: Try Habitat - Step 10
 step: 10
 total_steps: 9
 ---
-p.page-body--tip
-  | Done! You've completed the Habitat demo.
-
-h2.page-body--title Learning More About Habitat
+h2.page-body--title Add an update strategy
 
 p
-  | Thanks for taking some time to get familiar with Habitat. We hope you've seen
-    some things that would benefit your own workflow and that you'll continue
-    learning more about using Habitat with your own projects.
+  | First paragraph
 p
-  | Following is a list of additional resources that will provide more depth and
-    hands-on experience:
-ul
-  li
-    a href="/tutorials" Habitat Tutorials
-  li
-    a href="/docs" Habitat Docs
-  li
-    a href="/community" Habitat Open Source Community
+  | Second paragraph
 
-p
-  | If you've got more time now, then we'd recommend you complete the Getting Started
-    tutorial where you'll install Habitat and start building your first plan.
+code
+  | hab -strategy
+
+= partial "partials/terminal" do
+
+#success
+  = partial "partials/advance_button" do
+    | Next - Bind services
 
-a.button.cta href="/tutorials/getting-started-overview/"
-  | Tutorial - Getting Started with Habitat
+= partial "partials/previous_button" do
+  | Back to previous step

www/source/try/2.html.slim

@@ -1,7 +1,7 @@
 ---
 title: Try Habitat - Step 2
 step: 2
-total_steps: 9
+total_steps: 7
 ---
 h2.page-body--title Ask the Supervisor What's Configurable
 
@@ -17,10 +17,13 @@ p
     configuration settings exposed via the Supervisor.
 
 code
-  | hab sup config habitat/postgresql
+  | hab sup config core/redis
+
+= partial "partials/terminal" do
 
 #success
   = partial "partials/advance_button" do
     | Next - Make a configuration change
 
-= partial "partials/terminal" do
+= link_to "/try/", :class => "back-link" do
+  | Back to previous step

www/source/try/3.html.slim

@@ -1,27 +1,30 @@
 ---
 title: Try Habitat - Step 3
 step: 3
-total_steps: 9
+total_steps: 7
 ---
 h2.page-body--title Configure the Service Through Environment Variables
 
 p
-  | Now that we've seen what is configurable, let's go ahead and make a change.
+  | In the first step, we started up the Redis service and noted a warning about the
+    TCP backlog setting. In the last step, we saw that many settings - including the TCP backlog -
+    can be overridden.
 p
   | There are a couple of ways to make config changes to your service. The first
     method utilizes environment variables that are set when you start the service,
-    as you'll see below. In the next step, we'll learn about editing the config
-    files directly.
+    as you'll see below.
 p
-  | Let's suppose you need to run your database on a different port than the default.
-    No problem, we'll just define the new port value using an environment
-    variable when we start the service.
+  | Let's start the Redis service again, this time overriding the TCP backlog setting.
+    Notice that the warning is no longer present upon starting up the service.
 
 code
-  | HAB_POSTGRESQL="port=5433" hab start habitat/postgresql
+  | HAB_REDIS="tcp-backlog=128" hab start core/redis
+
+= partial "partials/terminal" do
 
 #success
   = partial "partials/advance_button" do
     | Next - Update the configuration file
 
-= partial "partials/terminal" do
+= partial "partials/previous_button" do
+  | Back to previous step