added pagination support to event log
Change-Id: I18a21ba71679407bd512f1895ba91717c8ca5990
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/paginate.html b/app/common/directives/paginate.html
new file mode 100644
index 0000000..6355695
--- /dev/null
+++ b/app/common/directives/paginate.html
@@ -0,0 +1,18 @@
+<nav aria-label="pagination">
+ <ul class="pagination" role="menubar">
+ <li><a href=""><span>First</span></a></li>
+ <li><a href=""><span>Previous</span></a></li>
+ <li><a href="">1</a></li>
+ <li><a href="">2</a></li>
+ <li><a href="">3</a></li>
+ <li class="current"><a href="">4</a></li>
+ <li><a href="">5</a></li>
+ <li><a href="">6</a></li>
+ <li><a href="">7</a></li>
+ <li><a href="">8</a></li>
+ <li><a href="">9</a></li>
+ <li><a href="">10</a></li>
+ <li><a href=""><span>Next</span></a></li>
+ <li><a href=""><span>Last</span></a></li>
+ </ul>
+</nav>
\ No newline at end of file
diff --git a/app/common/directives/paginate.js b/app/common/directives/paginate.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/app/common/directives/paginate.js
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index 3b98626..6642cef 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -40,8 +40,8 @@
// Links
$links: #648FFF;
-$links__hover: $lightbg__accent;
-$links__visited: $purple;
+$links__hover: $lightbg__primary;
+$links__visited: $darkbg__primary;
$links__disabled: rgba(27, 40, 52, 0.70);
// Navigation
diff --git a/app/common/styles/elements/accordion.scss b/app/common/styles/elements/accordion.scss
new file mode 100644
index 0000000..75d3c5e
--- /dev/null
+++ b/app/common/styles/elements/accordion.scss
@@ -0,0 +1,58 @@
+
+// Accordion
+
+#header__actions-bar {
+ padding-top: 1em;
+ padding-right: 1em;
+ background: $medgrey;
+ margin-left: 0;
+
+ .event__actions {
+ margin-top: 1em;
+ margin-right: 10px;
+ @include mediaQuery(medium) {
+ margin-top: 0;
+ }
+ @include mediaQuery(large) {
+ margin-right: -20px;
+ }
+ }
+
+}
+
+.accord-trigger {
+ transform: rotate(90deg);
+ font-size: 1.5em;
+ color: lighten($darkgrey, 10%);
+ padding: .3em;
+ display: block;
+ margin: 0 auto;
+ transition: all .2s ease;
+ &:after {
+ content: '\276F'
+ }
+ &.active {
+ transform: rotate(-90deg);
+ color: $darkbg__accent;
+ }
+ &:focus {
+ outline: 0;
+ color: $darkbg__accent;
+ }
+}
+
+// Single event log card
+.accord-row {
+ position: relative;
+ border-top: 1px solid $lightgrey;
+ padding: 1em 1em 1em 0em;
+ background: $lightblue;
+ overflow: hidden;
+ &.active,
+ &.selected {
+ background: $white;
+ }
+ &:hover {
+ background: $white;
+ }
+}
\ No newline at end of file
diff --git a/app/common/styles/elements/content-search.scss b/app/common/styles/elements/content-search.scss
new file mode 100644
index 0000000..800dd98
--- /dev/null
+++ b/app/common/styles/elements/content-search.scss
@@ -0,0 +1,57 @@
+
+// content search
+
+.content__search {
+ width: 100%;
+ max-width: 99%;
+ display: inline-block;
+ position: relative;
+ margin-right: 1em;
+ margin-top: .5em;
+ @media (min-width: 1333px) {
+ max-width: 60%;
+ margin-top: 0;
+ }
+ #content__search-input {
+ margin: 0;
+ border: 0;
+ border-bottom: 2px solid $lightgrey;
+ padding-left: 40px;
+ &:focus {
+ box-shadow: none;
+ }
+ }
+ label {
+ position: absolute;
+ text-indent: -9999px;
+ height:20px;
+ width: 20px;
+ left: 10px;
+ top: 25px;
+ transform: translateY(-50%);
+ background: url("../assets/images/icon-search.svg") center center no-repeat;
+ opacity: .6;
+ }
+
+ #event__search-submit {
+ position: absolute;
+ top: .5em;
+ right: 0;
+ padding: 8px;
+ min-height: 20px;
+ max-width: 70px;
+ text-align: center;
+ margin: 0;
+ }
+
+ .tag-filter-label {
+ text-transform: uppercase;
+ color: $darkgrey;
+ font-size: .7em;
+ font-weight: 700;
+ min-height: 20px;
+ line-height:1.3;
+ margin-top: .5em;
+ text-align: right;
+ }
+}//end event-log__search
\ No newline at end of file
diff --git a/app/common/styles/elements/index.scss b/app/common/styles/elements/index.scss
index 6277a91..11c4968 100644
--- a/app/common/styles/elements/index.scss
+++ b/app/common/styles/elements/index.scss
@@ -3,4 +3,7 @@
@import "status";
@import "alerts";
@import "tags";
-@import "inline-confirm";
\ No newline at end of file
+@import "inline-confirm";
+@import "accordion";
+@import "content-search";
+@import "paginate";
\ No newline at end of file
diff --git a/app/common/styles/elements/inline-confirm.scss b/app/common/styles/elements/inline-confirm.scss
index cb4c7e3..f2da19e 100644
--- a/app/common/styles/elements/inline-confirm.scss
+++ b/app/common/styles/elements/inline-confirm.scss
@@ -3,6 +3,7 @@
.inline__confirm {
position: absolute;
top: 0;
+ right: 0;
transform: translateY(-103%);
width: 100%;
height: 100%;
@@ -12,6 +13,7 @@
color: $white;
padding: 2em 2em 1.55em 2em;
overflow: hidden;
+ @include fastTransition-all;
&.active {
transform: translateY(0);
@include fastTransition-all;
@@ -20,6 +22,10 @@
// Power confirmation buttons
.inline__confirm-buttons {
+ position: absolute;
+ top: 50%;
+ right: 1em;
+ transform: translateY(-50%);
.btn-primary {
background: transparent;
border: 2px solid $white;
@@ -32,7 +38,7 @@
border: 2px solid $primebtn__bg;
}
}
- @include mediaQuery(large) {
+ @include mediaQuery(medium) {
float: right;
}
}
@@ -40,6 +46,7 @@
// confirmation message
.inline__confirm-message {
display: inline-block;
+ max-width: 50%;
}
// Power confirmation message icon
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
new file mode 100644
index 0000000..2df88cc
--- /dev/null
+++ b/app/common/styles/elements/paginate.scss
@@ -0,0 +1,149 @@
+.pagination,
+.pagination li a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.pagination li { background-color: transparent; list-style-type: none; }
+
+.pagination a {
+ font-weight: 300;
+ padding-top: 1px;
+ text-decoration:none;
+ border: 1px solid $medgrey;
+ border-left-width: 0;
+ min-width:44px;
+ min-height:44px;
+ color: $darkbg__primary;
+}
+
+.pagination li:not([class*="current"]) a:hover {
+ background-color: $primebtn__bg;
+ color: $white;
+}
+
+.pagination li:not([class*="current"]) a:focus,
+.pagination li:not([class*="current"]) a:active {;
+ //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+ border-left-width:1px;
+}
+
+.pagination li:first-of-type a {
+ border-left-width: 1px;
+}
+
+.pagination li:first-of-type span,
+.pagination li:last-of-type span,
+.pagination li:nth-of-type(2) span,
+.pagination li:nth-last-of-type(2) span {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after,
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after {
+ display: inline-block;
+ text-rendering: auto;
+ font-size: 1.3em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after { content: "\027A0"; }
+
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after { content: "\0279E"; }
+
+.pagination li:first-child a::before,
+.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
+
+.pagination li.current a {
+ padding-top:.25em;
+ color: $white;
+ background-color: $lightbg__primary;
+ cursor: default;
+ pointer-events: none;
+ font-weight: 700;
+}
+
+@media only screen and ( max-width: 64.063em ) {
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 40.063em ) {
+ .pagination li {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li.current,
+ .pagination li:first-of-type,
+ .pagination li:last-of-type,
+ .pagination li:nth-of-type(2),
+ .pagination li:nth-last-of-type(2){
+ position: initial;
+ top: initial;
+ left: initial;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 0; }
+
+}
+
+@media only screen and ( max-width: 30.063em ) {
+
+ h1 { font-size: 1.35em !important; }
+
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 15.063em ) { /* For watches? */
+
+ .pagination li { width: 50%;}
+
+ .pagination li.current {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ width: 100%;
+ border-left-width: 1px;
+
+ }
+
+}
\ No newline at end of file
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index b06175b..e36fa66 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -9,3 +9,8 @@
padding: 1rem 2rem;
}
}
+
+section.row {
+ padding-left: 0;
+ padding-right: 0;
+}
\ No newline at end of file
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"> </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"> </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
diff --git a/app/overview/styles/log.scss b/app/overview/styles/log.scss
index 1c7b0b8..7c30762 100644
--- a/app/overview/styles/log.scss
+++ b/app/overview/styles/log.scss
@@ -22,7 +22,7 @@
}
}
.row {
- padding: 0;
+ //padding: 0;
margin-left: 0;
}
@@ -43,63 +43,6 @@
}
-// Event log search
-
-.event-log__search {
- width: 100%;
- max-width: 99%;
- display: inline-block;
- position: relative;
- margin-right: 1em;
- margin-top: .5em;
- @media (min-width: 1333px) {
- max-width: 60%;
- margin-top: 0;
- }
- #event__search {
- margin: 0;
- border: 0;
- border-bottom: 2px solid $lightgrey;
- padding-left: 40px;
- &:focus {
- box-shadow: none;
- }
- }
- label {
- position: absolute;
- text-indent: -9999px;
- height:20px;
- width: 20px;
- left: 10px;
- top: 25px;
- transform: translateY(-50%);
- background: url("../assets/images/icon-search.svg") center center no-repeat;
- opacity: .6;
- }
-
- #event__search-submit {
- position: absolute;
- top: .5em;
- right: 0;
- padding: 8px;
- min-height: 20px;
- max-width: 70px;
- text-align: center;
- margin: 0;
- }
-
- .tag-filter-label {
- text-transform: uppercase;
- color: $darkgrey;
- font-size: .7em;
- font-weight: 700;
- min-height: 20px;
- line-height:1.3;
- margin-top: .5em;
- text-align: right;
- }
-}//end event-log__search
-
.event-log__filters {
position: relative;
padding-bottom: .5em;
@@ -119,21 +62,23 @@
position: relative;
overflow: hidden;
- #event__actions-bar {
- padding-top: 1em;
- padding-right: 1em;
- background: $medgrey;
+ .inline__confirm {
+ height: auto;
margin-left: 0;
+ left: 0;
+ padding: 1em 2em 1em 2em
+ }
- .event__actions {
- margin-top: 1em;
- margin-right: 10px;
- @include mediaQuery(medium) {
- margin-top: 0;
- }
- @include mediaQuery(large) {
- margin-right: -20px;
- }
+ .inline__confirm-message {
+ margin-top: 5px;
+ margin-bottom: -10px;
+ }
+ .inline__confirm-buttons .btn-primary {
+ padding: .5em 2em;
+ min-height: 25px;
+ margin-top: .5em;
+ @include mediaQuery(medium) {
+ margin-top: 0;
}
}
@@ -187,9 +132,11 @@
// Single event log card
.event-log__single-event {
+ position: relative;
border-top: 1px solid $lightgrey;
- padding: 1em 1em 0 0em;
+ padding: 1em 1em 1em 0em;
background: $lightblue;
+ overflow: hidden;
&.active,
&.selected {
background: $white;
@@ -264,17 +211,17 @@
// Event metadata row
.event__metadata-row {
- height: 0;
+ max-height: 0;
overflow: hidden;
- -webkit-transition: 0.5s linear all;
- transition: 0.2s linear all;
+ -webkit-transition: 0.5s linear max-height;
+ transition: 0.5s linear max-height;
&.active {
- height: 400px;
+ max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
@include mediaQuery(small) {
- height: 320px;
+ max-height: 1000px;
}
@include mediaQuery(medium) {
- height: 280px;
+ max-height: 1000px;
}
}
}
@@ -313,6 +260,9 @@
.event__related-item {
margin-right: 1em;
padding-top: .3em;
+ display: inline-block;
+ float: left;
+ clear: both;
}
.event__actions {
margin-left: -1em;