Added hardware sensors functionality

Change-Id: I99435613bb77fc0ff72f046c2dc047b13962a7a3
Signed-off-by: Iftekharul Islam <iislam@us.ibm.com>
diff --git a/app/overview/controllers/sensors-controller.html b/app/overview/controllers/sensors-controller.html
new file mode 100644
index 0000000..b742f07
--- /dev/null
+++ b/app/overview/controllers/sensors-controller.html
@@ -0,0 +1,191 @@
+<div id="sensors">
+    <div class="row column">
+        <h1>Sensors</h1>
+    </div>
+    <section class="row column">
+        <div class="page-header">
+            <h2 class="inline h4">Sensors present in the system</h2>
+
+        </div>
+    </section>
+    <!-- Filters -->
+    <section class="row column">
+        <!-- filters -->
+        <div class="event-log__filters">
+            <!-- severity filter -->
+            <div class="dropdown__wrapper">
+                <button class="dropdown__button" ng-click="severityFilter = severityFilter == true ? false : true;"
+                        ng-class="{'active' : severityFilter}">All Severity
+                </button>
+                <ul class="dropdown__list multi-select inline" ng-show="severityFilter">
+                    <li>
+                        <button>All severity (999)</button>
+                    </li>
+                    <li ng-click="dropdown_selectedHigh = !dropdown_selectedHigh; filterHigh = !filterHigh "
+                        ng-class="{'active' : dropdown_selectedHigh, 'active' : filterHigh}">
+                        <button>High severity (999)</button>
+                    </li>
+                    <li ng-click="dropdown_selectedMed = !dropdown_selectedMed; filterMed = !filterMed"
+                        ng-class="{'active' : dropdown_selectedMed, 'active' : filterMed}">
+                        <button>Medium severity (999)</button>
+                    </li>
+                    <li ng-click="dropdown_selectedLow = !dropdown_selectedLow; filterLow = !filterLow"
+                        ng-class="{'active' : dropdown_selectedLow, 'active' : filterLow}">
+                        <button>Low severity (999)</button>
+                    </li>
+                </ul>
+            </div>
+            <!-- date range -->
+            <div class="dropdown__wrapper">
+                <button class="dropdown__button" ng-click="dateFilter = dateFilter == true ? false : true;"
+                        ng-class="{'active' : dateFilter}">Date Range
+                </button>
+                <div class="dropdown__list dropdown__date row" ng-show="dateFilter">
+                    <div class="column small-6">
+                        <label>Start Date</label>
+                        <input type="date"/>
+                    </div>
+                    <div class="column small-6">
+                        <label>End Date</label>
+                        <input type="date"/>
+                    </div>
+                </div>
+            </div>
+            <!-- Status filter -->
+            <div class="dropdown__wrapper">
+                <button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
+                        ng-class="{'active' : statusFilter}">Status
+                </button>
+                <ul class="dropdown__list multi-select inline" ng-show="statusFilter">
+                    <li>
+                        <button>All status (999)</button>
+                    </li>
+                    <li ng-click="dropdown_selectedResolved = !dropdown_selectedResolved; filterResolved = !filterResolved"
+                        ng-class="{'active' : dropdown_selectedResolved, 'active' : filterResolved}">
+                        <button>Resolved issues (999)</button>
+                    </li>
+                    <li ng-click="dropdown_selectedUnresolved = !dropdown_selectedUnresolved; filterUnresolved = !filterUnresolved"
+                        ng-class="{'active' : dropdown_selectedUnresolved, 'active' : filterUnresolved}">
+                        <button>Unresolved issues (999)</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <!-- search -->
+        <div class="content__search">
+            <label for="content__search-input">Event Log Search</label>
+            <input id="content__search-input" type="text" placeholder="Filter issues"/>
+            <input id="sensors__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
+            <div class="sensors__search-tag-wrapper row"
+                 ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow">
+                <div class="column small-2 large-1 no-padding">
+                    <p class="inline label tag-filter-label">Filtered by: </p>
+                </div>
+                <div class="column small-10 large-11 ">
+                    <button class="tag custom">Custom Tag</button>
+                    <button class="tag sensors__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High
+                        priority
+                    </button>
+                    <button class="tag sensors__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium
+                        priority
+                    </button>
+                    <button class="tag sensors__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority
+                    </button>
+                    <button class="tag sensors__resolved" ng-click="filterUnresolved = !filterUnresolved"
+                            ng-show="filterUnresolved">Unresolved issues
+                    </button>
+                    <button class="tag sensors__resolved" ng-click="filterResolved = !filterResolved"
+                            ng-show="filterResolved">Resolved issues
+                    </button>
+                </div>
+            </div>
+        </div>
+    </section> <!-- end filter -->
+
+    <section id="sensor__details" class="row column">
+        <div id="header__actions-bar" class="row ">
+            <div class="column">
+                <p class="inline">icon here</p>
+                <h3 class="inline"><strong>Fan speed sensors</strong> <span class="h5">(RPMs)</span></h3>
+            </div>
+        </div>
+
+        <!-- Sensor -->
+        <div class="row column accord-row"
+             ng-class="{'active': sensors__metadatarow, 'selected': sensors__selected}">
+            <div class="row">
+                <div class="column small-10 large-11 sensor__info"
+                     ng-click="sensors__metadatarow = ! sensors__metadatarow">
+                    <p class="inline priority-tag high-priority">High</p>
+                    <p class="inline sensor__title">Fan Speed 1</p>
+                    <p class="inline sensor__reading float-right">6200 <span>rpms</span></p>
+                </div>
+                <div class="column small-2 large-1">
+                    <button class="accord-trigger" ng-class="{'active': sensors__metadatarow}"
+                            ng-click="sensors__metadatarow = ! sensors__metadatarow"></button>
+                </div>
+            </div>
+            <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow}">
+                <div class="column small-12">
+                    <div class="threshold-chart">
+                        <span class="threshold__marker" style="left: 90%;"><p class="threshold__value">6200</p></span>
+                        <span class="threshold thresh__low-critical"></span>
+                        <span class="threshold thresh__low-warn"></span>
+                        <span class="threshold thresh__normal"></span>
+                        <span class="threshold thresh__high-warn"></span>
+                        <span class="threshold thresh__high-critical"></span>
+                    </div>
+                </div>
+
+                <div class="column small-6">
+                    <p class="h5 content-header">Associated Events</p>
+                    <a href="#/overview/log">View 5 events related to Fan 1</a>
+                </div>
+                <div class="column small-6">
+                    <p class="h5 content-header">Associated Hardware</p>
+                    <a href="">None</a>
+                </div>
+            </div>
+        </div>
+
+        <!-- Sensor -->
+        <div class="row column accord-row"
+             ng-class="{'active': sensors__metadatarow2, 'selected': sensors__selected}">
+            <div class="row">
+                <div class="column small-10 large-11 sensor__info"
+                     ng-click="sensors__metadatarow2 = ! sensors__metadatarow2">
+                    <p class="inline priority-tag high-priority">High</p>
+                    <p class="inline sensor__title">Fan Speed 2</p>
+                    <p class="inline sensor__reading float-right">3600 <span>rpms</span></p>
+                </div>
+                <div class="column small-2 large-1">
+                    <button class="accord-trigger" ng-class="{'active': sensors__metadatarow2}"
+                            ng-click="sensors__metadatarow2 = ! sensors__metadatarow2"></button>
+                </div>
+            </div>
+            <div class="row sensors__metadata-row" ng-class="{'active': sensors__metadatarow2}">
+                <div class="column small-12">
+                    <div class="threshold-chart">
+                        <span class="threshold__marker" style="left: 50%"><p class="threshold__value">3600</p></span>
+                        <span class="threshold thresh__low-critical"></span>
+                        <span class="threshold thresh__low-warn"></span>
+                        <span class="threshold thresh__normal"></span>
+                        <span class="threshold thresh__high-warn"></span>
+                        <span class="threshold thresh__high-critical"></span>
+                    </div>
+                </div>
+
+                <div class="column small-6">
+                    <p class="h5 content-header">Associated Events</p>
+                    <a href="#/overview/log">View 5 events related to Fan 1</a>
+                </div>
+                <div class="column small-6">
+                    <p class="h5 content-header">Associated Hardware</p>
+                    <a href="">None</a>
+                </div>
+            </div>
+        </div>
+
+    </section>
+    <paginate ng-include="paginate"></paginate>
+</div> <!-- end event log -->
\ No newline at end of file