commit 193c22a8c001e3274e0767b36df9a18a30e71da7
author Yoshie Muranaka <yoshiemuranaka@gmail.com> Tue Jun 30 20:54:10 2020 -0700
committer Derick Montague <derick.montague@ibm.com> Thu Jul 02 13:12:04 2020 +0000
tree 65c88c08789e67e6c30f24531716fadf9156a68d
parent de87f67879d02ccf09cea983cdc927f7c9dda2cf

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

src/locales/en-US.json

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index fd97837..8b80233 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"
     },

src/views/Health/EventLogs/EventLogs.vue

diff --git a/src/views/Health/EventLogs/EventLogs.vue b/src/views/Health/EventLogs/EventLogs.vue
index 21a0e28..f1c7616 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 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 @@
         }
       ],
       filterStartDate: null,
-      filterEndDate: null
+      filterEndDate: null,
+      searchFilter: null
     };
   },
   computed: {
@@ -323,6 +338,9 @@
     onChangeDateTimeFilter({ fromDate, toDate }) {
       this.filterStartDate = fromDate;
       this.filterEndDate = toDate;
+    },
+    onChangeSearchInput(searchValue) {
+      this.searchFilter = searchValue;
     }
   }
 };