Merge pull request #214 from nmoutschen/add-stream-name

Add a field to customize the Kinesis stream name

Author: samdengler

DataProcessing/guide/site/dashboard.html

@@ -23,6 +23,10 @@ <h6 class='modal-title'>Configure Dashboard</h6>
 <label for='cognitoIdentityPoolId'>Cognito Identity Pool ID</label>
 <input autocomplete='off' class='form-control' id='cognitoIdentityPoolId' spellcheck='false' type='text'>
 </div>
+<div class='form-group'>
+<label for='kinesisStreamName'>Kinesis Data Stream Name</label>
+<input autocomplete='off' class='form-control' id='kinesisStreamName' spellcheck='false' type='text' value='wildrydes'>
+</div>
 </div>
 <div class='modal-footer'>
 <button class='btn btn-primary' id='start'>Start</button>

DataProcessing/guide/site/images/streaming-data-dashboard-configure.png

@@ -115,8 +115,7 @@
     }
   }
 
-  Dashboard.Poller = function(kinesis, map, console) {
-    const streamName = 'wildrydes';
+  Dashboard.Poller = function(kinesis, streamName, map, console) {
     const shardIteratorType = 'LATEST';
     const pollFrequency = 1000;
 
@@ -189,16 +188,18 @@
   $(window).on('load', function() {
     const map = Dashboard.Map(L).init('map').render();
 
-    if (Cookies.get('cognitoIdentityPoolId') !== undefined) {
+    if (Cookies.get('cognitoIdentityPoolId') !== undefined || Cookies.get('kinesisStreamName') !== undefined) {
       $('#cognitoIdentityPoolId').val(Cookies.get('cognitoIdentityPoolId'));
+      $('#kinesisStreamName').val(Cookies.get('kinesisStreamName'));
       $('#modal').on('shown.bs.modal', () => $('button').focus());
     }
 
     $('form').on('submit', function(e) {
       e.preventDefault();
 
       const cognitoIdentityPoolId = $('#cognitoIdentityPoolId').val();
-      const region = cognitoIdentityPoolId.substring(0, cognitoIdentityPoolId.indexOf(":"))
+      const kinesisStreamName = $('$kinesisStreamName').val();
+      const region = cognitoIdentityPoolId.substring(0, cognitoIdentityPoolId.indexOf(":"));
 
       AWS.config.region = region;
       AWS.config.credentials = new AWS.CognitoIdentityCredentials({
@@ -209,7 +210,7 @@
 
       kinesis.listStreams().promise()
         .then(() => Cookies.set("cognitoIdentityPoolId", cognitoIdentityPoolId))
-        .then(() => Dashboard.Poller(kinesis, map, console).poll())
+        .then(() => Dashboard.Poller(kinesis, kinesisStreamName, map, console).poll())
         .then(() => $('#modal').modal('hide'))
         .catch((err) => $('#modal .notice').text(err).show());
     });

DataProcessing/guide/site/js/dashboard.js

@@ -131,7 +131,7 @@ <h4 id="view-unicorn-status-on-the-dashboard">6. View unicorn status on the dash
 <p><strong>✅ Step-by-step directions</strong></p>
 <ol type="1">
 <li><p>Open the <a href="https://dataprocessing.wildrydes.com/dashboard.html">Unicorn Dashboard</a>.</p></li>
-<li><p>Enter the <strong>Cognito Identity Pool ID</strong> you noted in step 4 and click <strong>Start</strong>.</p>
+<li><p>Enter the <strong>Cognito Identity Pool ID</strong> you noted in step 4 and the <strong>Kinesis Data Stream name</strong> and click <strong>Start</strong>.</p>
 <p><img src="./images/streaming-data-dashboard-configure.png" /></p></li>
 <li><p>Validate that you can see the unicorn on the map.</p>
 <p><img src="./images/streaming-data-map.png" /></p></li>