Добавлена возможность изменять кол-во выводимых сообщений в мониторин…

…ге (fixes #7)

Добавлена возможность фильтрации сообщений в мониторинге (fixes #8)

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## [0.9.4] - 2020-12-26
+### Added
+- Добавлена возможность кэширования скомпилированного DI-контейнера с помощью метода `useCache`. По умолчанию: выключено.
+- Добавлена возможность изменять кол-во выводимых сообщений в мониторинге.
+- Добавлена возможность фильтрации сообщений в мониторинге.
+### Fixed
+- Исправлены ошибки с некорректным отображением статуса обработки "синхронных" сообщений.
+
 ## [0.9.3] - 2020-08-25
 ### Fixed
 - Исправлена ошибка с обработчиками событий и командой `stop-workers`
@@ -13,4 +21,4 @@
 - Исправлена ошибка с пустым графиком в мониторинге
 
 ## [0.9.0] - 2020-07-26
-- Первый релиз
+- Первый релиз

assets/components/RecentMessagesPanel.vue

@@ -1,5 +1,11 @@
 <template>
     <div class="c-table-panel">
+        <div class="c-table-panel__search">
+            <el-input
+                v-model="search"
+                :placeholder="$t('label.findMessages')"
+            />
+        </div>
         <table class="c-table">
             <thead>
                 <tr>
@@ -65,57 +71,99 @@
 
         <el-pagination
             background
-            layout="prev, pager, next"
+            layout="prev, pager, next, sizes"
             :total="total"
-            :page-size="pageSize"
-            hide-on-single-page
+            :page-size.sync="currentPageSize"
+            :page-sizes="pageSizes"
             @current-change="handlePageChange"
+            @size-change="handlePageSizeChange"
         />
     </div>
 </template>
 
 <script>
-    export default {
-        props: {
-            data: {
-                type: Array,
-                required: true
-            },
-            total: {
-                type: Number,
-                required: true
-            },
-            pageSize: {
-                type: Number,
-                default: 10
-            }
+export default {
+    props: {
+        data: {
+            type: Array,
+            required: true
+        },
+        total: {
+            type: Number,
+            required: true
+        },
+        pageSize: {
+            type: Number,
+            default: 10
+        },
+        pageSizes: {
+            type: Array,
+            default: () => [10, 20, 50]
         },
+        searchDelay: {
+            type: Number,
+            default: 300
+        }
+    },
 
-        methods: {
-            getStatusType(status) {
-                if (status === 'failed') {
-                    return 'danger';
-                }
-                if (status === 'received') {
-                    return 'warning';
-                }
-                if (status === 'handled') {
-                    return 'success';
-                }
-                return 'info';
-            },
+    data() {
+        return {
+            search: '',
+            searchTimeout: null
+        };
+    },
 
-            formatDate(date) {
-                return (new Date(date)).toLocaleString();
+    computed: {
+        currentPageSize: {
+            get() {
+                return this.pageSize;
             },
+            set(value) {
+                this.$emit('update:pageSize', value);
+            }
+        }
+    },
 
-            handleMessageSelect(row) {
-                this.$emit('message-select', row);
-            },
+    watch: {
+        search(value) {
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+            this.searchTimeout = setTimeout(() => {
+                this.$emit('search', value);
+            }, this.searchDelay);
+        }
+    },
 
-            handlePageChange(value) {
-                this.$emit('paginate', value);
+    methods: {
+        getStatusType(status) {
+            if (status === 'failed') {
+                return 'danger';
+            }
+            if (status === 'received') {
+                return 'warning';
+            }
+            if (status === 'handled') {
+                return 'success';
             }
+            return 'info';
+        },
+
+        formatDate(date) {
+            return (new Date(date)).toLocaleString();
+        },
+
+        handleMessageSelect(row) {
+            this.$emit('message-select', row);
+        },
+
+        handlePageChange(value) {
+            this.$emit('paginate', value);
+        },
+
+        handlePageSizeChange(value) {
+            this.$emit('page-size-change', value);
         }
-    };
-</script>
+    }
+};
+</script>

assets/locales/ru.js

@@ -10,7 +10,8 @@ export default {
         transport_name: 'Получатель',
         buses: 'Шины',
         problem: 'Проблема',
-        ok: 'ОК'
+        ok: 'ОК',
+        findMessages: 'Поиск сообщений'
     },
     title: {
         status: 'Статус',
@@ -50,4 +51,4 @@ export default {
             last1y: 'Последний 1 год'
         }
     }
-};
+};

assets/plugins/element-ui.js

@@ -8,7 +8,10 @@ import {
     DropdownItem,
     Pagination,
     Tag,
-    Drawer
+    Drawer,
+    Input,
+    Select,
+    Option
 } from 'element-ui';
 import lang from 'element-ui/lib/locale/lang/ru-RU';
 import locale from 'element-ui/lib/locale';
@@ -25,3 +28,6 @@ Vue.use(DropdownItem);
 Vue.use(Pagination);
 Vue.use(Tag);
 Vue.use(Drawer);
+Vue.use(Input);
+Vue.use(Select);
+Vue.use(Option);

assets/styles/components/_table-panel.scss

@@ -1,6 +1,31 @@
 .c-table-panel {
+    &__search {
+        padding: 5px 10px;
+
+        .el-input__inner {
+            line-height: 26px !important;
+            height: 28px !important;
+            border: 1px solid #dcdfe6 !important;
+            box-shadow: none !important;
+        }
+    }
+
     .el-pagination {
         padding: 5px;
         text-align: center;
+
+        &__sizes {
+            margin-right: -135px;
+        }
+
+        .el-select {
+            .el-input {
+                width: 135px;
+
+                &__inner {
+                    height: 28px !important;
+                }
+            }
+        }
     }
-}
+}

assets/styles/vendor/_element-ui.scss

@@ -11,4 +11,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 @import "~element-ui/packages/theme-chalk/src/dropdown";
 @import "~element-ui/packages/theme-chalk/src/pagination";
 @import "~element-ui/packages/theme-chalk/src/row";
-@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/col";
+@import "~element-ui/packages/theme-chalk/src/input";
+@import "~element-ui/packages/theme-chalk/src/select";
+@import "~element-ui/packages/theme-chalk/src/select-dropdown";