GUI S3 Objects lifecycle (#2759): History modal - change filter selec…

…t to multiselect. Refactoring
epam · Aug 25, 2022 · 174e5be · 174e5be
1 parent 12062d2
commit 174e5be
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 33 deletions.
diff --git a/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/notification-form.js b/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/notification-form.js
@@ -16,6 +16,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {computed} from 'mobx';
+import {inject, observer} from 'mobx-react';
 import classNames from 'classnames';
 import {
   Button,
@@ -52,6 +54,8 @@ const fullWidthLayout = {
   }
 };
 
+@inject('usersInfo')
+@observer
 class NotificationForm extends React.Component {
   state = {
     previewMode: false,
@@ -65,6 +69,21 @@ class NotificationForm extends React.Component {
     return form.getFieldValue('notification.disabled');
   }
 
+  @computed
+  get informedUsers () {
+    const {usersInfo, rule} = this.props;
+    if (usersInfo.loaded &&
+      rule.notification &&
+      rule.notification.informedUserIds
+    ) {
+      return (rule.notification.informedUserIds || []).map(id => {
+        const user = (usersInfo.value || []).find(info => info.id === id);
+        return user || undefined;
+      }).filter(Boolean);
+    }
+    return [];
+  }
+
   setPreviewMode = (preview) => {
     this.setState({previewMode: preview});
   };
@@ -118,8 +137,8 @@ class NotificationForm extends React.Component {
             {getFieldDecorator('notification.informedUserIds', {
               type: 'array',
               initialValue: rule.notification
-                ? rule.notification.informedUserIds
-                : undefined
+                ? this.informedUsers
+                : []
             })(
               <UsersRolesSelect
                 adGroups={false}

diff --git a/...components/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-edit-modal/index.js b/...components/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-edit-modal/index.js
@@ -16,6 +16,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import {computed} from 'mobx';
+import {inject, observer} from 'mobx-react';
 import {
   Button,
   Input,
@@ -25,11 +27,9 @@ import {
   Col,
   Select,
   Collapse,
-  message,
   Spin
 } from 'antd';
 import moment from 'moment-timezone';
-import UsersInfoFilter from '../../../../../../../models/user/UsersInfoFilter';
 import {NotificationForm, TransitionsForm} from '../../forms';
 import styles from './life-cycle-edit-modal.css';
 
@@ -81,11 +81,22 @@ function FormSection ({
   );
 }
 
+@inject('usersInfo')
+@observer
 class LifeCycleEditModal extends React.Component {
   state = {
     pending: false
   }
 
+  @computed
+  get usersInfo () {
+    const {usersInfo} = this.props;
+    if (usersInfo.loaded) {
+      return usersInfo.value;
+    }
+    return [];
+  }
+
   get showMatches () {
     const {form} = this.props;
     const criteriaType = form.getFieldValue('transitionCriterion.type');
@@ -119,7 +130,7 @@ class LifeCycleEditModal extends React.Component {
             delete payload.notification.disabled;
           }
           if (notification && notification.informedUserIds) {
-            const recipientsIds = await this.fetchRecipientsInfo(notification.informedUserIds);
+            const recipientsIds = this.getIdsFromUsers(notification.informedUserIds);
             payload.notification.informedUserIds = recipientsIds;
           }
           if (transitions && transitions.length) {
@@ -147,24 +158,14 @@ class LifeCycleEditModal extends React.Component {
     });
   };
 
-  fetchRecipientsInfo = async (recipients) => {
-    if (!recipients || !recipients.length > 0) {
-      return undefined;
-    }
-    const names = recipients
-      .map(recipient => recipient.name)
-      .filter(Boolean);
-    if (names && names.length) {
-      const request = new UsersInfoFilter(names);
-      await request.fetch();
-      if (request.error) {
-        message.error(request.error, 5);
+  getIdsFromUsers = (users = []) => {
+    return users.map(user => {
+      const userInfo = this.usersInfo.find(info => info.name === user.name);
+      if (userInfo) {
+        return userInfo.id;
       }
-      return request.loaded && request.value && request.value.length > 0
-        ? request.value.map(user => user.id)
-        : undefined;
-    }
-    return undefined;
+      return undefined;
+    }).filter(Boolean);
   };
 
   onCancel = () => {

diff --git a/...ponents/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-history-modal/index.js b/...ponents/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-history-modal/index.js
@@ -97,7 +97,9 @@ class LifeCycleHistoryModal extends React.Component {
     const {executions} = this.state;
     const executionsData = executions.map(execution => ({
       date: moment.utc(execution.updated).format(FULL_FORMAT),
-      action: ACTION_TYPES.transition,
+      action: DESTINATIONS[execution.storageClass] === DESTINATIONS.DELETION
+        ? ACTION_TYPES.deletion
+        : ACTION_TYPES.transition,
       user: 'System',
       file: execution.path,
       prolongation: undefined,
@@ -120,8 +122,9 @@ class LifeCycleHistoryModal extends React.Component {
 
   get filteredHistory () {
     const {actionFilter} = this.state;
-    if (actionFilter) {
-      return this.history.filter(entry => entry.action === actionFilter);
+    if (actionFilter && actionFilter.length > 0) {
+      return this.history
+        .filter(entry => actionFilter.includes(entry.action));
     }
     return this.history;
   }
@@ -142,8 +145,8 @@ class LifeCycleHistoryModal extends React.Component {
     }
   };
 
-  onSelectActionFilter = (key) => {
-    this.setState({actionFilter: key});
+  onSelectActionFilter = (keys) => {
+    this.setState({actionFilter: keys});
   };
 
   renderHeader = () => {
@@ -172,14 +175,10 @@ class LifeCycleHistoryModal extends React.Component {
               Action type:
             </span>
             <Select
+              mode="multiple"
               onChange={this.onSelectActionFilter}
-              style={{marginLeft: 5, width: 150}}
+              className={styles.historyFilter}
             >
-              <Select.Option
-                style={{height: 32}}
-                value={undefined}
-                key="empty"
-              />
               {Object.values(ACTION_TYPES).map((description) => (
                 <Select.Option
                   value={description}

diff --git a/...owser/forms/life-cycle-rules/modals/life-cycle-history-modal/life-cycle-history-modal.css b/...owser/forms/life-cycle-rules/modals/life-cycle-history-modal/life-cycle-history-modal.css
@@ -52,3 +52,9 @@
   flex-direction: column;
   width: fit-content;
 }
+
+.history-filter {
+  min-width: 150px;
+  max-width: 350px;
+  margin-left: 5px;
+}
diff --git a/client/src/components/special/users-roles-select/index.js b/client/src/components/special/users-roles-select/index.js
@@ -77,6 +77,7 @@ class UsersRolesSelect extends React.Component {
   @computed
   get users () {
     const {users} = this.props;
+    console.log('users', users)
     if (users && users.loaded) {
       return (users.value || [])
         .map(user => ({