Misc event log changes
* changed styles of priority tags
* fixed alignment issues with checkboxes
* moved event ID and time stamp to top and event description
below. Allows more room for long event descriptions without
wrapping or truncating.
* changed status filter label to be more accurate
Change-Id: I471bc480cfc1ab1b58753e21546f3b862a287c58
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/directives/log-event.html b/app/common/directives/log-event.html
index 18aa8b3..7d9ab4d 100644
--- a/app/common/directives/log-event.html
+++ b/app/common/directives/log-event.html
@@ -15,24 +15,24 @@
<label class="control-check">
<input type="checkbox" name="events__check" ng-click="event.selected= ! event.selected"
ng-checked="event.selected"/>
- <div class="control__indicator"></div>
+ <span class="control__indicator"></span>
</label>
</div>
- <div class="column small-9 large-9 event-log__event-info"
+ <div class="column small-9 large-10 event-log__event-info"
ng-click="event.meta = ! event.meta">
+ <p class="inline event__id">#{{event.Id}}</p>
<p class="inline event__priority event-resolved" ng-hide="event.Resolved == 0">Resolved</p>
- <p class="inline event__priority" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}" ng-hide="event.Resolved == 1">{{event.priority}}</p>
- <p class="inline event__severity">{{event.severity_code}}</p>
- <p class="inline event__description">{{event.Severity}}</p>
+ <p class="inline event__priority" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}">{{event.priority}}</p>
+ <p class="inline event__severity" ng-class="{'low-priority': event.priority == 'Low', 'medium-priority': event.priority == 'Medium', 'high-priority': event.priority == 'High'}">{{event.severity_code}}</p>
+ <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p></div>
<div>
- <p class="inline event__id">#{{event.Id}}</p>
- <p class="inline event__timestamp">{{event.Timestamp| date:'MM/dd/yyyy HH:mm:ss '+tmz: tmz}}</p></div>
- </div>
+ <p class="inline event__description">{{event.Severity}}</p>
+ </div>
<div class="column small-1 large-1">
<button class="accord-trigger" ng-class="{'active': event.meta}"
ng-click="event.meta = ! event.meta"></button>
</div>
- </div>
+ </div>
<div class="row event__metadata-row" ng-class="{'active': event.meta}">
<div class="column small-1 large-1 event-log__col-check"> </div>
<div class="column small-11 large-11 end">
diff --git a/app/common/directives/log-filter.html b/app/common/directives/log-filter.html
index c0c5a20..e3b3716 100644
--- a/app/common/directives/log-filter.html
+++ b/app/common/directives/log-filter.html
@@ -27,7 +27,7 @@
</div>
</div>
<div class="inline event__status-filter">
- <p class="filter-label">Filter by issue status</p>
+ <p class="filter-label">Filter by event status</p>
<!-- Status filter -->
<div class="dropdown__wrapper">
<button class="dropdown__button" ng-click="statusFilter = statusFilter == true ? false : true;"
diff --git a/app/common/styles/base/colors.scss b/app/common/styles/base/colors.scss
index ac8e0ae..38dd401 100644
--- a/app/common/styles/base/colors.scss
+++ b/app/common/styles/base/colors.scss
@@ -63,6 +63,17 @@
$low-lightbg: #c42cd6;
$normal: #00baa1;
+// Priority tags
+$lowPriorityColor: #00b6cb;
+$lowPriorty-bg: #cdf0f6;
+$medPriorityColor: #feb101;
+$medPriorty-bg: #fef0cd;
+$highPriorityColor: #e62425;
+$highPriority-bg: #edc9cb;
+$resolvedColor: #999999;
+$resolved-bg: #d6d6d6;
+
+
// Threshold graphs
$thresh-critical: $error-color;
$thresh-warning: #ffb001;
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index a5dc5a7..ef1d78e 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -4,7 +4,7 @@
</div>
<section class="row column">
<div class="page-header">
- <h2 class="inline h4">All events generated by the system</h2>
+ <h2 class="inline h4">All events generated from the BMC</h2>
<div class="event-log__timezone inline float-right">
<button class="dropdown__button" ng-click="timezone = timezone == true ? false : true;" toggle-flag="timezone"
>User timezone: <span ng-show="tmz== 'EDT'">EDT (UTC-4)</span><span ng-show="tmz=='UTC'">UTC - 0</span>
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index a0ab2eb..f0fc0ac 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -1,6 +1,8 @@
// Event Log SCSS
#event-log {
+ .dropdown__button {
+ }
// Dropwdowns filter
.dropdown__date.row {
padding: .5em;
@@ -67,6 +69,11 @@
text-indent: -9999px;
}
}
+ .event__status-filter .dropdown__wrapper,
+ .event__status-filter .dropdown__button {
+ width: 100%;
+ text-align: left;
+ }
}
.event-log__filters {
@@ -98,6 +105,13 @@
.btn-resolve {
color: $white;
}
+ .event-log__col-check {
+ text-align: left;
+ max-width: 30px;
+ .control-check {
+ margin-left: -5px;
+ }
+ }
}
.inline__confirm {
height: auto;
@@ -171,6 +185,16 @@
margin: .5em 0 .5em 0;
position: relative;
overflow: hidden;
+ @include fastTransition-all;
+ &.active {
+ background-color: $lightgrey;
+ @include slowTransition-all;
+ }
+ .accord-trigger {
+ position: absolute;
+ right: 1em;
+ top: .3em;
+ }
}
.event-log__event-info {
&:hover {
@@ -189,19 +213,24 @@
min-width: 103px;
text-align: center;
&.high-priority {
- background: $error-color;
-
+ background: $highPriority-bg;
+ border: 2px solid $highPriorityColor;
+ color: darken($highPriorityColor, 5%);
}
&.med-priority {
- background: $alert__warning;
-
+ background: $medPriorty-bg;
+ border: 2px solid $medPriorityColor;
+ color: darken($medPriorityColor, 15%);
}
&.low-priority {
- background: $lightbg__primary;
+ background: $lowPriorty-bg;
+ border: 2px solid $lowPriorityColor;
+ color: darken($lowPriorityColor, 5%);
}
&.event-resolved {
- background: $purple;
- padding: 2px 1em;
+ background: $resolved-bg;
+ border: 2px solid $resolvedColor;
+ color: $resolvedColor;
}
}
@@ -209,17 +238,34 @@
.event__severity {
font-size: .7em;
text-transform: uppercase;
- color: $darkgrey;
font-weight: 700;
min-width: 103px;
@include mediaQuery(medium) {
- margin: 0 1em;
+ margin: 0 1em 0 1.5em;
+ }
+ &.high-priority {
+ color: darken($highPriorityColor, 5%);
+ }
+ &.med-priority {
+ color: darken($medPriorityColor, 15%);
+ }
+ &.low-priority {
+ color: darken($lowPriorityColor, 5%);
+ }
+ &.event-resolved {
+ color: $resolvedColor;
}
}
//Event description
.event__description {
font-weight: 400;
+ margin-left: 1em;
+ @include mediaQuery(small) {
+ margin-left: 4.5em;
+ margin-right: 1em;
+ }
+ word-break: break-all;
}
//Event ID
@@ -246,7 +292,6 @@
-webkit-transition: 0.5s linear max-height;
transition: 0.5s linear max-height;
&.active {
- max-height: 1000px; //max-height used to allow flexible height of content and still allow transition
@include mediaQuery(small) {
max-height: 1000px;
}