GUI Library: storage content filtering implemented (epam#3515)

* GUI Library: storage content filtering implemented * GUI Storage content filtering: minor style adjustments * GUI Storage content filtering: use Antd datepicker instead react-daypicker, minor style adjustments * GUI Storage content filtering: minor style adjustments * GUI Storage content filtering: change size filters to mb from b, onPressEnter filter handling, change truncated results alert * GUI Storage content filtering: minor fix * GUI Storage content filtering: fix datePicker onEnter handling * GUI Storage content filtering: small fix * GUI Storage content filtering: small fix * GUI Storage content filtering: small fix * GUI Storage content filtering: change date filters from datebefore\after to from\to * GUI Storage content filtering: fix UTC string * GUI Storage content filtering: remove filters for every path. Now filters resets after any kind of navigation * GUI Storage content filtering: fix UTC format for predefined date filters * GUI Storage content filtering: minimum 3 characters name filter restriction * GUI Storage content filtering: refactoring * GUI Storage content filtering: fix default date filter * Filters fix --------- Co-authored-by: Aleksandr Gorodetskii <[email protected]> Co-authored-by: Mikhail Rodichenko <[email protected]>
AleksandrGorodetskii · Apr 30, 2024 · 13734ea · 13734ea
1 parent 7e29585
commit 13734ea
Show file tree

Hide file tree

Showing 7 changed files with 797 additions and 5 deletions.
diff --git a/client/src/components/pipelines/browser/data-storage/components/filter-config.js b/client/src/components/pipelines/browser/data-storage/components/filter-config.js
@@ -0,0 +1,40 @@
+/*
+ * Copyright 2017-2024 EPAM Systems, Inc. (https://www.epam.com/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import moment from 'moment-timezone';
+
+const FILTER_FIELDS = {
+  name: 'name',
+  sizeGreaterThan: 'sizeGreaterThan',
+  sizeLessThan: 'sizeLessThan',
+  dateAfter: 'dateAfter',
+  dateBefore: 'dateBefore',
+  dateFilterType: 'dateFilterType'
+};
+
+const PREDEFINED_DATE_FILTERS = [{
+  title: 'Last week',
+  key: 'lastWeek',
+  dateAfter: (currentDate) => currentDate && moment(currentDate).subtract(7, 'days').startOf('day'),
+  dateBefore: undefined
+}, {
+  title: 'Last month',
+  key: 'lastMonth',
+  dateAfter: (currentDate) => currentDate && moment(currentDate).subtract(1, 'month').endOf('day'),
+  dateBefore: undefined
+}];
+
+export {FILTER_FIELDS, PREDEFINED_DATE_FILTERS};
diff --git a/client/src/components/pipelines/browser/data-storage/components/filters.css b/client/src/components/pipelines/browser/data-storage/components/filters.css
@@ -0,0 +1,44 @@
+/*
+ * Copyright 2017-2024 EPAM Systems, Inc. (https://www.epam.com/)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.filter-wrapper {
+  display: flex;
+  flex-direction: column;
+  padding: 5px;
+  outline: none;
+}
+
+.filter-wrapper-controls {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin: 5px 10px;
+  min-width: 180px;
+}
+
+.input-container {
+  margin-bottom: 5px;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.date-picker-container {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-bottom: 5px;
+}