Real-Time IoT Device Monitoring with Kinesis Data Analytics
Real-Time IoT Device Monitoring with Kinesis Data Analytics

The AWS Documentation website is getting a new look!
Try it now and let us know what you think. Switch to the new look >>

You can return to the original look by selecting English in the language selector above.

Appendix B: Customizing the Dashboard

The Real-Time IoT Device Monitoring with Kinesis Data Analytics solution dashboard displays a default set of metrics, but you can customize the dashboard to include any metrics from IoT devices. Follow the step-by-step instructions in this section to add a metric that calculates maximum air pressure.

Step 1. Update the Demo Script to Send New Data

In the send-messages.sh script, update the JSON payload to send a pressure value as an integer. For this exercise, add the bold JSON to the script.

aws iot-data publish --topic "$TOPIC" --payload "{\"id\":\"1\",\"device\":\"$DEVICE\",\"flow\":$FLOW,\"temp\":$TEMP,\"humidity\":$HUMIDITY,\"sound\":$SOUND, \”pressure\”: 100}" --profile "$PROFILE" --region "$REGION"

Step 2. Add the Metric to the Source Schema

Use this procedure to update the source schema with the new metric. For information on using the Schema Editor, see Working with the Schema Editor in the Amazon Kinesis Data Analytics Developer Guide.

Note

If the custom metric is already added to the Amazon Kinesis Data Analytics application’s in-application input stream, skip to Step 2.

  1. Sign in to the AWS Management Console and open the Amazon Kinesis Data Analytics console.

  2. Select the KinesisAnalyticsApp application from the list.

  3. Under Real-Time Analytics, choose Go to SQL results.

  4. On the Source data tab, choose Actions.

  5. In the dropdown menu, choose Edit schema.

  6. Choose + Add column and enter the following:

    • For Column name, enter pressure.

    • For Column type, enter integer.

    • For Row path, enter $.pressure.

  7. Choose Save schema and update stream samples.

  8. To verify that you added the metric correctly, choose Go to SQL results and verify that the Source data tab shows the new column (pressure) and an applicable value.

Step 3. Modify the Application’s SQL Code

Use this procedure to update the application’s code with the new SQL statement. For information on using the SQL Editor, see Working with the SQL Editor in the Amazon Kinesis Data Analytics Developer Guide.

  1. On the Kinesis Data Analytics application’s SQL Editor page, select the Real-time analytics tab.

  2. Add the bold SQL statement

    CREATE OR REPLACE PUMP connected_device_pump AS INSERT INTO FAN_OUT_STREAM SELECT current_timestamp as eventTimeStamp, 'ConnectedDevicesCount', 'None', 0, 'Count', * FROM ( SELECT STREAM * FROM TABLE(COUNT_DISTINCT_ITEMS_TUMBLING( CURSOR(SELECT STREAM * FROM source_sql_stream_001), 'device', 60 ) ) ); CREATE OR REPLACE PUMP per_device_max_pump AS INSERT INTO FAN_OUT_STREAM SELECT STREAM STEP(source_sql_stream_001."COL_time" BY INTERVAL '1' MINUTE) AS eventTimeStamp, 'PerDeviceMaxPressure', "device", 0, 'Maximum', MAX("pressure") AS max_value FROM source_sql_stream_001 GROUP BY "device", STEP(source_sql_stream_001.rowtime BY INTERVAL '1' MINUTE), STEP(source_sql_stream_001."COL_time" BY INTERVAL '1' MINUTE);

    This SQL statement creates a new metric (PerDeviceMaxPressure) that stores maximum air pressure readings in the Amazon DynamoDB table.

  3. Select Save and run SQL.

Step 4. Update the Lambda Code

Add the bold code to the UpdateDDBLambda AWS Lambda function.

type_operator_map = { 'ConnectedDevicesCount' : max, 'PerDeviceMaxTemp' : max, 'PerDeviceMinTemp': min, 'PerDeviceAvgTemp': avg, 'PerDeviceMaxPressure': max, 'DeviceTempAnomalyScore': max, 'AvgTempValue': avg, 'MinTempValue': min, 'MaxTempValue': max, 'MaxDisconnTime': max, 'MinDisconnTime': min, 'AvgDisconnTime': avg, 'MaxConnTime': max, 'MinConnTime': min, 'AvgConnTime': avg }

Step 5. Update the JavaScript Code

The solution creates an Amazon Simple Storage Service (Amazon S3) bucket (websitebucket) with a js folder that contains a dash.js file with the JavaScript code that populates the charts with metrics. To populate the new chart with metrics, download the dash.js file and follow the step-by-step instructions to modify the JavaScript.

  1. Declare the variables and parameters. For this exercise, add the bold JavaScript to line 267 of the dash.js file.

    var maxTempPerDeviceQueryTime = new Date(currentTime.getTime() - 600000).toISOString().replace('T',' ').replace('Z','');
 var maxTempPerDeviceChart = generateHorizontalBarChart("maxTempCanvas", "Max Temp per device"); var maxPressurePerDeviceQueryTime = new Date(currentTime.getTime() - 600000).toISOString().replace('T',' ').replace('Z',''); var maxPressurePerDeviceChart = generateHorizontalBarChart("maxPressureCanvas", "Max Pressure per device");
  2. Modify the getLatestRecord function. Add the bold JavaScript to the function.

    var PerDeviceMinTempParams = retrieveParams("PerDeviceMinTemp", minTempPerDeviceQueryTime); var PerDeviceMaxPressureParams = retrieveParams("PerDeviceMaxPressure", maxPressurePerDeviceQueryTime); var AvgTempParams = retrieveParams("AvgTempValue", AvgTempValueQueryTime); … docClient.query(PerDeviceMaxTempParams, function(err, data) { if (err) console.log(err); else { maxTempPerDeviceQueryTime = updateHorizontalBarChart(data, 20, maxTempPerDeviceChart, maxTempPerDeviceQueryTime, splitFunc); } }); docClient.query(PerDeviceMaxPressureParams, function(err, data) { if (err) console.log(err); else { maxPressurePerDeviceQueryTime = updateHorizontalBarChart(data, 20, maxPressurePerDeviceChart, maxPressurePerDeviceQueryTime, splitFunc); } });
  3. Upload the modified dash.js file to the solution’s Amazon S3 bucket.

Step 6. Update the Website Assets

In the Amazon S3 bucket with the JavaScript, there is a file (index.html) that contains all the HTML elements that render charts on the dashboard. To add a new chart, download the index.html file, modify the HTML, and upload the modified file to the Amazon S3 bucket. You can replace the row of an existing chart with the new row, or add the new row to the end of the file.

For this exercise, add the following HTML element to line 287 of the index.html file.

<div class="row aws-mb-l"> <div class="col-md-5 col-md-offset-1 col-xs-12"> <div class="x_title"> <h3>Max Pressure per Device</h3> </div> <div class="x_content"> <canvas id="maxPressureCanvas"></canvas> </div> </div> </div>

After you upload the modified index.html file to the Amazon S3 bucket, open the dashboard in a browser and verify the new chart shows metrics.