Add search input to event logs page

Adds ability to filter event log table items by
text input.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ie19bd4b3942ae2bec9288c351d4a674b424ae879

2 files changed, 21 insertions, 2 deletions

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index fd978372..8b802331 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -119,6 +119,7 @@
       "description": "Description",
       "emptyMessage": "There are no logs to show",
       "id": "ID",
+      "searchLogs": "Search logs",
       "severity": "Severity",
       "type": "Type"
     },
diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 21a0e288..f1c76164 100644
--- a/src/views/Health/EventLogs/EventLogs.vue
+++ b/src/views/Health/EventLogs/EventLogs.vue
@@ -2,7 +2,18 @@
   <b-container fluid="xl">
     <page-title />
     <b-row class="mb-3">
-      <b-col md="6" lg="7" xl="5" offset-md="6" offset-lg="5" offset-xl="7">
+      <b-col
+        sm="8"
+        md="7"
+        xl="4"
+        class="mb-2 mb-xl-0 d-flex flex-column justify-content-end"
+      >
+        <search
+          :placeholder="$t('pageEventLogs.table.searchLogs')"
+          @changeSearch="onChangeSearchInput"
+        />
+      </b-col>
+      <b-col sm="8" md="7" xl="5" offset-xl="3">
         <table-date-filter @change="onChangeDateTimeFilter" />
       </b-col>
     </b-row>
@@ -43,6 +54,7 @@
           :empty-text="$t('pageEventLogs.table.emptyMessage')"
           :per-page="perPage"
           :current-page="currentPage"
+          :filter="searchFilter"
           @row-selected="onRowSelected($event, filteredLogs.length)"
         >
           <!-- Checkbox column -->
@@ -142,12 +154,14 @@ import BVTableSelectableMixin from '@/components/Mixins/BVTableSelectableMixin';
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import TableDataFormatterMixin from '@/components/Mixins/TableDataFormatterMixin';
 import TableSortMixin from '@/components/Mixins/TableSortMixin';
+import Search from '@/components/Global/Search';
 
 export default {
   components: {
     IconExport,
     IconTrashcan,
     PageTitle,
+    Search,
     StatusIcon,
     TableFilter,
     TableRowAction,
@@ -216,7 +230,8 @@ export default {
         }
       ],
       filterStartDate: null,
-      filterEndDate: null
+      filterEndDate: null,
+      searchFilter: null
     };
   },
   computed: {
@@ -323,6 +338,9 @@ export default {
     onChangeDateTimeFilter({ fromDate, toDate }) {
       this.filterStartDate = fromDate;
       this.filterEndDate = toDate;
+    },
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
     }
   }
 };