WebUI: Adding Filters support to system logs

Adding Filter support to system logs page
 - Severity filter.
 - Date filter with start and end date.
 - Filter by Sensort Type.

Tested By:
  Loaded System logs page with type selection
  'Event' and check all filters.

Change-Id: I41eba4cd59c0f3c2933637bf0e207a3eca3214f1
Signed-off-by: AppaRao Puli <apparao.puli@linux.intel.com>
diff --git a/app/server-health/styles/syslog.scss b/app/server-health/styles/syslog.scss
index c225e55..52681e0 100644
--- a/app/server-health/styles/syslog.scss
+++ b/app/server-health/styles/syslog.scss
@@ -1,4 +1,4 @@
-// Event Log SCSS
+// System Logs SCSS
 #sys-log {
 
   // Dropwdowns filter
@@ -27,27 +27,68 @@
 .sort_button_wrapper {
   padding-top:.3em;
 }
-.sys-log__filters {
-  position: relative;
-  padding-bottom: .5em;
-  padding-top: .5em;
 
-  @media (min-width: 1333px) {
-    float: right;
-    display: inline-block;
+#sys-log-filter {
+  .filter-label {
+    color: $darkgrey;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: .75em;
+    margin-bottom: 3px;
+  }
+  .sys-log__severity-filter {
+    float:left;
+    margin-right: 2em;
+    margin-bottom: 1em;
+    button {
+      padding: .6em 2em;
+      margin: 0px -1px;
+      min-height: 2.1em;
+      font-size: .9em;
+      font-weight: 700;
+      border-radius: 0;
+      &.first,
+      &.last {
+        border-radius: 3px;
+      }
+      @media (min-width: 583px) {
+        &.last {
+          border-left: 0;
+        }
+      }
+    }
+    .btn-primary {
+      border: 2px solid $primebtn__bg;
+    }
+  }
+  .sys-log__date-filter {
+    margin-right: 1em;
+    color: $darkgrey;
+    float:left;
+    input {
+      width: 170px;
+      height: 2.1rem;
+    }
+    label {
+      height: 0;
+      text-indent: -9999px;
+    }
+  }
+  .sys-log__status-filter {
+    float:left;
+    @include mediaQuery(medium) {
+      width: 25%;
+    }
+    .dropdown__wrapper,
+    .dropdown__button {
+      width: 100%;
+      text-align: left;
+    }
   }
 }
 
-.accord-trigger {
-  position: absolute;
-  right: 1em;
-  top: .3em;
-}
-
-#sys-log__events,
-.sys-log__events {
+#sys-log__logs {
   display: block;
-  margin-top: 1.6em;
   position: relative;
   .header__actions-bar {
     .btn-export,
@@ -306,4 +347,4 @@
     }
   }
 }
-//end sys-log__events
+//end sys-log__logs