diff options
author | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-08-04 16:04:56 +0300 |
---|---|---|
committer | Anna Tsyganova <ATSyganova@IBS.RU> | 2022-08-04 16:04:56 +0300 |
commit | 3d9dc166c3d25716d22c0c90ae7e616d17633132 (patch) | |
tree | 8485534b2ac576e57116e4a91de5e927a85e6552 | |
parent | cdad50007dac808e185579c8d117d769509058a8 (diff) | |
parent | 597dbacbb1eec27115b0e8e5dfe1876952f99ac2 (diff) | |
download | webui-vue-3d9dc166c3d25716d22c0c90ae7e616d17633132.tar.xz |
Merge branch 'sila' of git.sila.ru:pub/openbmc/webui-vue into sila
-rw-r--r-- | src/assets/styles/bmc/_sila/_forms.scss | 9 | ||||
-rw-r--r-- | src/components/_sila/Global/Search.vue | 82 | ||||
-rw-r--r-- | src/components/_sila/Mixins/SearchFilterMixin.js | 1 | ||||
-rw-r--r-- | src/locales/en-US.json | 7 | ||||
-rw-r--r-- | src/locales/ru-RU.json | 7 | ||||
-rw-r--r-- | src/views/_sila/Logs/EventLogs/EventLogs.vue | 29 | ||||
-rw-r--r-- | src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue | 26 |
7 files changed, 130 insertions, 31 deletions
diff --git a/src/assets/styles/bmc/_sila/_forms.scss b/src/assets/styles/bmc/_sila/_forms.scss index 03878ad9..6ef725d2 100644 --- a/src/assets/styles/bmc/_sila/_forms.scss +++ b/src/assets/styles/bmc/_sila/_forms.scss @@ -245,6 +245,15 @@ padding-top: 4px; } +@media (min-width: 1200px) { + .search-block-1200 { + position: absolute; + top: 4.3rem; + right: $spacer; + justify-content: end; + } +} + @media (min-width: 768px) { .search-block { position: absolute; diff --git a/src/components/_sila/Global/Search.vue b/src/components/_sila/Global/Search.vue index ac8f9bfb..c25224a7 100644 --- a/src/components/_sila/Global/Search.vue +++ b/src/components/_sila/Global/Search.vue @@ -6,32 +6,49 @@ label-class="invisible" class="mb-2" > - <b-input-group size="md" class="align-items-center"> - <b-input-group-prepend> - <icon-search class="search-icon" /> - </b-input-group-prepend> - <b-form-input - :id="`searchInput-${_uid}`" - ref="searchInput" - v-model="filter" - class="search-input" - type="text" - :aria-label="$t('global.form.search')" - :placeholder="placeholder" - @input="onChangeInput" + <div class="d-flex"> + <b-form-select + v-if="showSearchBy" + v-model="searchBy" + class="mr-2 search-selector" + :options="selectOptions" + @change="onSelect" > - </b-form-input> - <b-button - v-if="filter" - variant="link" - class="btn-icon-only input-action-btn" - :title="$t('global.ariaLabel.clearSearch')" - @click="onClearSearch" - > - <icon-close /> - <span class="sr-only">{{ $t('global.ariaLabel.clearSearch') }}</span> - </b-button> - </b-input-group> + <template #first> + <b-form-select-option :value="null" disabled>{{ + $t('pagePostCodeLogs.table.searchBy') + }}</b-form-select-option> + </template> + </b-form-select> + <b-input-group size="md" class="align-items-center"> + <b-input-group-prepend> + <icon-search class="search-icon" /> + </b-input-group-prepend> + <b-form-input + :id="`searchInput-${_uid}`" + ref="searchInput" + v-model="filter" + class="search-input" + type="text" + :aria-label="$t('global.form.search')" + :placeholder="placeholder" + @input="onChangeInput" + > + </b-form-input> + <b-button + v-if="filter" + variant="link" + class="btn-icon-only input-action-btn" + :title="$t('global.ariaLabel.clearSearch')" + @click="onClearSearch" + > + <icon-close /> + <span class="sr-only">{{ + $t('global.ariaLabel.clearSearch') + }}</span> + </b-button> + </b-input-group> + </div> </b-form-group> </div> </template> @@ -50,13 +67,25 @@ export default { return this.$t('global.form.search'); }, }, + selectOptions: { + type: Array, + default: () => [], + }, + showSearchBy: { + type: Boolean, + default: false, + }, }, data() { return { filter: null, + searchBy: 'all', }; }, methods: { + onSelect() { + this.$emit('search-by', this.searchBy); + }, onChangeInput() { this.$emit('change-search', this.filter); }, @@ -80,4 +109,7 @@ export default { z-index: 4; stroke: gray('400'); } +.search-selector { + font-size: 14px; +} </style> diff --git a/src/components/_sila/Mixins/SearchFilterMixin.js b/src/components/_sila/Mixins/SearchFilterMixin.js index a4819e26..5cdf7296 100644 --- a/src/components/_sila/Mixins/SearchFilterMixin.js +++ b/src/components/_sila/Mixins/SearchFilterMixin.js @@ -4,6 +4,7 @@ const SearchFilterMixin = { methods: { onChangeSearchInput(searchValue) { this.searchFilter = searchValue; + console.log('this.searchFilter!!!', this.searchFilter); }, onClearSearchInput() { this.searchFilter = null; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index f5cfed5b..02d72e09 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -295,7 +295,8 @@ "searchLogs": "Search logs", "severity": "Severity", "status": "Status", - "type": "Type" + "type": "Type", + "all": "All" }, "toast": { "errorDelete": "Error deleting %{count} log. | Error deleting %{count} logs.", @@ -679,7 +680,9 @@ "bootCount": "Boot count", "postCode": "POST code", "searchLogs": "Search logs", - "timeStampOffset": "Time stamp offset" + "all": "All", + "timeStampOffset": "Time stamp offset", + "searchBy": "Search by" } }, "pageProfileSettings": { diff --git a/src/locales/ru-RU.json b/src/locales/ru-RU.json index 089cf572..cb1523aa 100644 --- a/src/locales/ru-RU.json +++ b/src/locales/ru-RU.json @@ -295,7 +295,8 @@ "searchLogs": "Поиск записей в журнале событий", "severity": "Уровень", "status": "Статус", - "type": "Тип" + "type": "Тип", + "all": "Везде" }, "toast": { "errorDelete": "Ошибка удаления %{count} записи. | Ошибка уделения %{count} записей.", @@ -679,7 +680,9 @@ "bootCount": "Номер загрузки", "postCode": "POST код", "searchLogs": "Поиск в логах", - "timeStampOffset": "Временная метка" + "all": "Везде", + "timeStampOffset": "Временная метка", + "searchBy": "Поиск по" } }, "pageProfileSettings": { diff --git a/src/views/_sila/Logs/EventLogs/EventLogs.vue b/src/views/_sila/Logs/EventLogs/EventLogs.vue index bc276b29..b036303e 100644 --- a/src/views/_sila/Logs/EventLogs/EventLogs.vue +++ b/src/views/_sila/Logs/EventLogs/EventLogs.vue @@ -2,11 +2,18 @@ <b-container fluid="xl"> <page-title /> <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4"> + <b-col + sm="12" + xl="6" + class="search-block-1200 d-sm-flex align-items-end mb-4" + > <search :placeholder="$t('pageEventLogs.table.searchLogs')" + :show-search-by="true" + :select-options="searchSelectOptions" data-test-id="eventLogs-input-searchLogs" @change-search="onChangeSearchInput" + @search-by="onSearchBy" @clear-search="onClearSearchInput" /> <div class="ml-sm-4"> @@ -83,6 +90,8 @@ :per-page="perPage" :current-page="currentPage" :filter="searchFilter" + :filter-included-fields="filterIncludedFields" + :filter-debounce="300" :busy="isBusy" @filtered="onFiltered" @row-selected="onRowSelected($event, filteredLogs.length)" @@ -360,6 +369,20 @@ export default { tdClass: 'text-right text-nowrap', }, ], + searchSelectOptions: [ + { + value: 'all', + text: this.$t('pageEventLogs.table.all'), + }, + { + value: 'id', + text: this.$t('pageEventLogs.table.id'), + }, + { + value: 'description', + text: this.$t('pageEventLogs.table.description'), + }, + ], tableFilters: [ { key: 'severity', @@ -386,6 +409,7 @@ export default { itemsPerPageOptions: itemsPerPageOptions, perPage: perPage, searchFilter: searchFilter, + filterIncludedFields: null, searchTotalFilteredRows: 0, selectedRows: selectedRows, tableHeaderCheckboxModel: tableHeaderCheckboxModel, @@ -443,6 +467,9 @@ export default { }); }, methods: { + onSearchBy(field) { + this.filterIncludedFields = field === 'all' ? null : [field]; + }, changelogStatus(row) { this.$store .dispatch('eventLog/updateEventLogStatus', { diff --git a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue index 63b74bc9..c0e8cff9 100644 --- a/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue +++ b/src/views/_sila/Logs/PostCodeLogs/PostCodeLogs.vue @@ -2,10 +2,17 @@ <b-container fluid="xl"> <page-title /> <b-row class="align-items-start"> - <b-col sm="8" xl="6" class="search-block d-sm-flex align-items-end mb-4"> + <b-col + sm="12" + xl="6" + class="search-block-1200 d-sm-flex align-items-end mb-4" + > <search :placeholder="$t('pagePostCodeLogs.table.searchLogs')" + :show-search-by="true" + :select-options="searchSelectOptions" @change-search="onChangeSearchInput" + @search-by="onSearchBy" @clear-search="onClearSearchInput" /> <div class="ml-sm-4"> @@ -65,6 +72,8 @@ :per-page="perPage" :current-page="currentPage" :filter="searchFilter" + :filter-included-fields="filterIncludedFields" + :filter-debounce="300" :busy="isBusy" @filtered="onFiltered" @row-selected="onRowSelected($event, filteredLogs.length)" @@ -239,6 +248,17 @@ export default { tdClass: 'text-right text-nowrap', }, ], + searchSelectOptions: [ + { + value: 'all', + text: this.$t('pagePostCodeLogs.table.all'), + }, + { + value: 'bootCount', + text: this.$t('pagePostCodeLogs.table.bootCount'), + }, + { value: 'postCode', text: this.$t('pagePostCodeLogs.table.postCode') }, + ], expandRowLabel, activeFilters: [], currentPage: currentPage, @@ -247,6 +267,7 @@ export default { itemsPerPageOptions: itemsPerPageOptions, perPage: perPage, searchFilter: searchFilter, + filterIncludedFields: null, searchTotalFilteredRows: 0, selectedRows: selectedRows, tableHeaderCheckboxModel: tableHeaderCheckboxModel, @@ -306,6 +327,9 @@ export default { }); }, methods: { + onSearchBy(field) { + this.filterIncludedFields = field === 'all' ? null : [field]; + }, exportAllLogsString() { { return this.$store.getters['postCodeLogs/allPostCodes'].map( |