added pagination support to event log

Change-Id: I18a21ba71679407bd512f1895ba91717c8ca5990
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/overview/controllers/log-controller.html b/app/overview/controllers/log-controller.html
index 23cd500..a7da213 100644
--- a/app/overview/controllers/log-controller.html
+++ b/app/overview/controllers/log-controller.html
@@ -1,9 +1,7 @@
 <div id="event-log">
-
     <div class="row column">
         <h1>Event Log</h1>
     </div>
-
     <section class="row column">
         <div class="page-header">
             <h2 class="inline h4">All events generated by the system</h2>
@@ -22,10 +20,8 @@
             </div>
         </div>
     </section>
-
     <!-- Filters -->
     <section class="row column">
-
         <!-- filters -->
         <div class="event-log__filters">
             <!-- severity filter -->
@@ -87,26 +83,28 @@
                 </ul>
             </div>
         </div>
-
         <!-- search -->
-        <div class="event-log__search">
+        <div class="content__search">
             <label for="event__search">Event Log Search</label>
-            <input id="event__search" type="text" placeholder="Filter issues"/>
+            <input id="content__search-input" type="text" placeholder="Filter issues"/>
             <input id="event__search-submit" type="submit" class="btn btn-secondary" value="Submit"/>
-            <div class="event__search-tag-wrapper row" ng-show="filterUnresolved || filterResolved || filterHigh || filterMed || filterLow">
+            <div class="event__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 event__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High priority
+                    <button class="tag event__high" ng-click="filterHigh = !filterHigh" ng-show="filterHigh">High
+                        priority
                     </button>
-                    <button class="tag event__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium priority
+                    <button class="tag event__medium" ng-click="filterMed = !filterMed" ng-show="filterMed">Medium
+                        priority
                     </button>
                     <button class="tag event__low" ng-click="filterLow = !filterLow" ng-show="filterLow">Low priority
                     </button>
                     <button class="tag event__resolved" ng-click="filterUnresolved = !filterUnresolved"
-                                                ng-show="filterUnresolved">Unresolved issues
+                            ng-show="filterUnresolved">Unresolved issues
                     </button>
                     <button class="tag event__resolved" ng-click="filterResolved = !filterResolved"
                             ng-show="filterResolved">Resolved issues
@@ -115,10 +113,8 @@
             </div>
         </div>
     </section> <!-- end filter -->
-
     <section id="event-log__events" class="row column">
-
-        <div id="event__actions-bar" class="row ">
+        <div id="header__actions-bar" class="row ">
             <div class="column small-1 large-1 event-log__col-check">
                 <label class="control-check">
                     <input type="checkbox" name="events__check-all" ng-model="all"/>
@@ -126,10 +122,21 @@
                 </label>
             </div>
             <div class="column small-11 large-11 end col-logged-events">
+                <!-- top bar confirmation - ADD ACTIVE CLASS TO DISPLAY-->
+                <div class="inline__confirm event__confirm" ng-class="{active: confirm}">
+                    <div class="inline__confirm-message">
+                        <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete 9 logs</strong>?
+                        </p>
+                    </div>
+                    <div class="inline__confirm-buttons">
+                        <button class="btn-primary" ng-click="accept()">Yes</button>
+                        <button class="btn-primary" ng-click="cancel()">No</button>
+                    </div>
+                </div>
                 <p class="inline"><span class="event__select-count">999</span> Events are logged</p>
                 <!-- when logs are selected, this text changes to show how many logs are checked -->
                 <div class="event__actions">
-                    <button class="inline btn-delete" ng-show="event || all">
+                    <button class="inline btn-delete" ng-show="event || all" ng-click="confirm= ! confirm">
                         <img class="event__icon" src="assets/images/icon-trashcan.svg" alt="">Delete
                     </button>
                     <button class="inline btn-resolve" ng-show="event || all">
@@ -139,11 +146,20 @@
                 </div>
             </div>
         </div>
-
         <!-- EVENT -->
         <div class="row column event-log__single-event"
              ng-class="{'active': event__metadatarow, 'selected': event__selected}">
             <div class="row">
+                <div class="inline__confirm" ng-class="{active: eventConfirm}">
+                    <div class="inline__confirm-message">
+                        <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete this
+                            event</strong>?</p>
+                    </div>
+                    <div class="inline__confirm-buttons">
+                        <button class="btn-primary" ng-click="accept()">Yes</button>
+                        <button class="btn-primary" ng-click="cancel()">No</button>
+                    </div>
+                </div>
                 <div class="column small-1 large-2 event-log__col-check">
                     <label class="control-check">
                         <input type="checkbox" name="event__check" ng-click="event__selected= ! event__selected"
@@ -168,24 +184,62 @@
             <div class="row event__metadata-row" ng-class="{'active': event__metadatarow}">
                 <div class="column small-1 large-1 event-log__col-check">&nbsp;</div>
                 <div class="column small-11 large-11 end">
-                    <div class="event__metadata">ESEL=00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00 00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00
+                    <div class="event__metadata">ESEL=00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00
+                        17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00
+                        00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00
+                        00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20
+                        00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20
+                        20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00
+                        00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74
+                        00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00
+                        00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03
+                        01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03
+                        ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64
+                        20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69
+                        6e 00 00 00 df 00 00 00 00 20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71
+                        56 4c 00 00 00 04 31 73 df b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00
+                        00 28 55 48 00 18 01 00 17 00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01
+                        00 00 02 00 00 09 17 0e 00 48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d
+                        00 04 00 00 00 00 00 00 00 00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20
+                        20 20 20 20 20 20 20 20 20 20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03
+                        b6 94 00 00 00 00 55 44 00 4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00
+                        00 00 00 00 00 00 00 00 00 00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01
+                        00 02 00 05 01 0b 5a fc d7 13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03
+                        f3 54 00 00 00 00 00 03 b6 94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00
+                        25 80 55 44 00 38 01 01 01 00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73
+                        74 62 6f 6f 74 2d 38 36 62 61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00 00 df 00 00 00 00
+                        20 00 04 12 01 6f aa 00 00 50 48 00 30 01 00 17 00 00 00 00 04 31 71 56 4c 00 00 00 04 31 73 df
+                        b2 42 00 00 07 00 00 00 00 00 00 00 00 00 00 00 00 90 00 00 28 90 00 00 28 55 48 00 18 01 00 17
+                        00 8a 03 40 00 00 00 00 00 ff ff 00 00 00 00 00 00 50 53 00 50 01 01 00 00 02 00 00 09 17 0e 00
+                        48 00 00 00 e0 00 00 0a 00 00 00 00 00 00 20 00 00 00 05 00 01 00 2d 00 04 00 00 00 00 00 00 00
+                        00 42 43 38 41 31 37 30 45 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20
+                        20 55 44 00 1c 01 06 01 00 02 54 41 4b 00 00 00 06 00 00 00 55 00 03 b6 94 00 00 00 00 55 44 00
+                        4c 01 02 01 00 ee ee ee ee 54 61 72 67 65 74 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00 00
+                        00 00 05 00 01 00 00 00 03 00 00 00 05 00 00 00 14 0f 7a bb 7c 23 01 00 02 00 05 01 0b 5a fc d7
+                        13 01 00 02 00 05 01 00 00 55 44 00 30 01 03 01 00 00 00 00 00 00 03 f3 54 00 00 00 00 00 03 b6
+                        94 00 00 00 00 40 03 dd 68 00 00 00 00 40 03 ba 48 00 00 00 00 00 00 25 80 55 44 00 38 01 01 01
+                        00 48 6f 73 74 62 6f 6f 74 20 42 75 69 6c 64 20 49 44 3a 20 68 6f 73 74 62 6f 6f 74 2d 38 36 62
+                        61 65 31 63 2f 68 62 69 63 6f 72 65 2e 62 69 6e 00
                     </div>
                     <div>
                         <div class="event__actions">
                             <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
                                                                alt="">Copy
                             </button>
-                            <button class="btn-delete"><img class="event__icon" src="assets/images/icon-trashcan.svg"
-                                                            alt="">Delete
+                            <button class="btn-delete" ng-click="eventConfirm= ! eventConfirm"><img class="event__icon"
+                                                                                                    src="assets/images/icon-trashcan.svg"
+                                                                                                    alt=""/>Delete
                             </button>
                             <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
                                                              alt="">Resolved
                             </button>
                         </div>
                         <div class="event__related">
-                            <p class="inline event__related-label">Related issue</p>
-                            <p class="inline event__related-item">Attribute-1</p>
-                            <p class="inline event__related-item">Attribute-2</p>
+                            <p class="inline event__related-label">Related items:</p>
+                            <a href="" class="event__related-item">/org/openbmc/control/chassis0/</a>
+                            <a href="" class="event__related-item">/org/openbmc/control/power0/</a>
+                            <a href="" class="event__related-item">/org/openbmc/control/chassis0/</a>
+                            <a href="" class="event__related-item">/org/openbmc/control/power0/</a>
                         </div>
                     </div>
                 </div>
@@ -195,10 +249,20 @@
         <div class="row column event-log__single-event"
              ng-class="{'active': event__metadatarow_2, 'selected': event__selected_2}">
             <div class="row">
+                <div class="inline__confirm" ng-class="{active: eventConfirm2}">
+                    <div class="inline__confirm-message">
+                        <p class="h3"><i></i>Are you sure you want to <strong class="ng-binding">delete this
+                            event</strong>?</p>
+                    </div>
+                    <div class="inline__confirm-buttons">
+                        <button class="btn-primary" ng-click="accept()">Yes</button>
+                        <button class="btn-primary" ng-click="cancel()">No</button>
+                    </div>
+                </div>
                 <div class="column small-1 large-2 event-log__col-check">
                     <label class="control-check">
                         <input type="checkbox" name="events__check" ng-click="event__selected_2= ! event__selected_2"
-                               ng-checked="all" />
+                               ng-checked="all"/>
                         <div class="control__indicator"></div>
                     </label>
                 </div>
@@ -242,30 +306,30 @@
                         pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit
                         amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Nulla porttitor
                         accumsan tincidunt.
-
                     </div>
                     <div>
                         <div class="event__actions">
                             <button class="btn-meta-copy"><img class="event__icon" src="assets/images/icon-copy.svg"
                                                                alt="">Copy
                             </button>
-                            <button class="btn-delete"><img class="event__icon" src="assets/images/icon-trashcan.svg"
-                                                            alt="">Delete
+                            <button class="btn-delete" ng-click="eventConfirm2= ! eventConfirm2"><img
+                                    class="event__icon"
+                                    src="assets/images/icon-trashcan.svg"
+                                    alt="">Delete
                             </button>
                             <button class="btn-resolve"><img class="event__icon" src="assets/images/icon-checklist.svg"
                                                              alt="">Resolved
                             </button>
                         </div>
                         <div class="event__related">
-                            <p class="inline event__related-label">Related issue</p>
-                            <p class="inline event__related-item">Attribute-1</p>
-                            <p class="inline event__related-item">Attribute-2</p>
+                            <p class="inline event__related-label">Related items:</p>
+                            <p class="event__related-item">Attribute-1</p>
+                            <p class="event__related-item">Attribute-2</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
         <!-- EVENT -->
         <div class="row column event-log__single-event" ng-class="{'active': event__metadatarow_1}">
             <div class="row">
@@ -330,15 +394,14 @@
                             </button>
                         </div>
                         <div class="event__related">
-                            <p class="inline event__related-label">Related issue</p>
-                            <p class="inline event__related-item">Attribute-1</p>
-                            <p class="inline event__related-item">Attribute-2</p>
+                            <p class="inline event__related-label">Related items:</p>
+                            <p class="event__related-item">Attribute-1</p>
+                            <p class="event__related-item">Attribute-2</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
         <!-- EVENT -->
         <div class="row column event-log__single-event">
             <div class="row">
@@ -364,7 +427,6 @@
                 <div class="column small-1 large-1 event-log__col-check">&nbsp;</div>
                 <div class="column small-11 large-11 end">
                     <div class="event__metadata">
-
                     </div>
                     <div>
                         <div class="event__actions">
@@ -379,13 +441,14 @@
                             </button>
                         </div>
                         <div class="event__related">
-                            <p class="inline event__related-label">Related issue</p>
-                            <p class="inline event__related-item">Attribute-1</p>
-                            <p class="inline event__related-item">Attribute-2</p>
+                            <p class="inline event__related-label">Related items:</p>
+                            <p class="event__related-item">Attribute-1</p>
+                            <p class="event__related-item">Attribute-2</p>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
     </section>
-</div> <!-- end event log -->
+    <paginate ng-include="paginate"></paginate>
+</div> <!-- end event log -->
\ No newline at end of file