Added device environmental status details

netbox/templates/dcim/device_status.html

@@ -42,6 +42,28 @@
                 </table>
             </div>
         </div>
+        <div class="col-md-6">
+            <div class="panel panel-default">
+                <div class="panel-heading"><strong>Environment</strong></div>
+                <table class="table panel-body">
+                    <tr id="cpu">
+                        <th colspan="2"><i class="fa fa-tachometer"></i> CPU</th>
+                    </tr>
+                    <tr id="memory">
+                        <th colspan="2"><i class="fa fa-microchip"></i> Memory</th>
+                    </tr>
+                    <tr id="temperature">
+                        <th colspan="2"><i class="fa fa-thermometer"></i> Temperature</th>
+                    </tr>
+                    <tr id="fans">
+                        <th colspan="2"><i class="fa fa-superpowers"></i> Fans</th>
+                    </tr>
+                    <tr id="power">
+                        <th colspan="2"><i class="fa fa-bolt"></i> Power</th>
+                    </tr>
+                </table>
+            </div>
+        </div>
     </div>
 {% endblock %}
 
@@ -59,6 +81,40 @@ $(document).ready(function() {
             $('#serial_number').html(json['get_facts']['serial_number']);
             $('#os_version').html(json['get_facts']['os_version']);
             $('#uptime').html(json['get_facts']['uptime']);
+            $.each(json['get_environment']['cpu'], function(name, obj) {
+                var row="<tr><td>" + name + "</td><td>" + obj['%usage'] + "%</td></tr>";
+                $("#cpu").after(row)
+            });
+            $('#memory').after("<tr><td>Used</td><td>" + json['get_environment']['memory']['used_ram'] + "MB</td></tr>");
+            $('#memory').after("<tr><td>Available</td><td>" + json['get_environment']['memory']['available_ram'] + "MB</td></tr>");
+            $.each(json['get_environment']['temperature'], function(name, obj) {
+                var style = "success";
+                if (obj['is_alert']) {
+                    style = "warning";
+                } else if (obj['is_critical']) {
+                    style = "danger";
+                }
+                var row="<tr class=\"" + style +"\"><td>" + name + "</td><td>" + obj['temperature'] + "°C</td></tr>";
+                $("#temperature").after(row)
+            });
+            $.each(json['get_environment']['fans'], function(name, obj) {
+                var row;
+                if (obj['status']) {
+                    row="<tr class=\"success\"><td>" + name + "</td><td><i class=\"fa fa-check text-success\"></i></td></tr>";
+                } else {
+                    row="<tr class=\"error\"><td>" + name + "</td><td><i class=\"fa fa-close text-error\"></i></td></tr>";
+                }
+                $("#fans").after(row)
+            });
+            $.each(json['get_environment']['power'], function(name, obj) {
+                var row;
+                if (obj['status']) {
+                    row="<tr class=\"success\"><td>" + name + "</td><td><i class=\"fa fa-check text-success\"></i></td></tr>";
+                } else {
+                    row="<tr class=\"danger\"><td>" + name + "</td><td><i class=\"fa fa-close text-danger\"></i></td></tr>";
+                }
+                $("#power").after(row)
+            });
         },
         error: function(xhr) {
             alert(xhr.responseText);