GUI S3 Objects lifecycle (#2759): Transition rules tab - sort rules b…

…y 'Path'. Mark 'Delete' transitions. Style adjustments
epam · Aug 26, 2022 · 411a3d0 · 411a3d0
1 parent aaa15e5
commit 411a3d0
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/client/src/components/pipelines/browser/forms/DataStorageEditDialog.js b/client/src/components/pipelines/browser/forms/DataStorageEditDialog.js
@@ -16,7 +16,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import {inject} from 'mobx-react';
 import {computed} from 'mobx';
 import {
@@ -581,7 +580,6 @@ export class DataStorageEditDialog extends React.Component {
             /^s3$/i.test(this.props.dataStorage.type) && (
               <Tabs.TabPane key="transitionRules" tab="Transition rules">
                 <LifeCycleRules
-                  rules={this.props.lifeCycleRules}
                   storageId={this.props.dataStorage.id}
                 />
               </Tabs.TabPane>

diff --git a/client/src/components/pipelines/browser/forms/life-cycle-rules/index.js b/client/src/components/pipelines/browser/forms/life-cycle-rules/index.js
@@ -66,7 +66,8 @@ class LifeCycleRules extends React.Component {
   get rules () {
     const {lifeCycleRules} = this.props;
     if (lifeCycleRules && lifeCycleRules.loaded && !lifeCycleRules.error) {
-      return lifeCycleRules.value || [];
+      return [...(lifeCycleRules.value || [])]
+        .sort((ruleA, ruleB) => ruleA.pathGlob.localeCompare(ruleB.pathGlob));
     }
     return [];
   }
@@ -163,7 +164,7 @@ class LifeCycleRules extends React.Component {
     return this.createRule(payload);
   };
 
-  renderRule = (rule, index) => {
+  renderRule = (rule) => {
     const controls = [
       <Button
         className={styles.controlBtn}
@@ -215,7 +216,12 @@ class LifeCycleRules extends React.Component {
         <td>{rule.pathGlob}</td>
         <td>{rule.objectGlob}</td>
         <td>
-          <span>
+          <span
+            className={destination === DESTINATIONS.DELETION
+              ? 'cp-error'
+              : ''
+            }
+          >
             {destination}
           </span>
           {(rule.transitions || []).length > 1 ? (
@@ -266,7 +272,7 @@ class LifeCycleRules extends React.Component {
                 </tr>
               </thead>
               <tbody>
-                {this.rules.map((rule, index) => this.renderRule(rule, index))}
+                {this.rules.map((rule) => this.renderRule(rule))}
               </tbody>
             </table>
           ) : null }
@@ -292,7 +298,6 @@ class LifeCycleRules extends React.Component {
 }
 
 LifeCycleRules.propTypes = {
-  rules: PropTypes.array,
   storageId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 

diff --git a/...nents/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-history-modal/columns.js b/...nents/pipelines/browser/forms/life-cycle-rules/modals/life-cycle-history-modal/columns.js
@@ -14,6 +14,9 @@
  * limitations under the License.
  */
 
+import React from 'react';
+import {DESTINATIONS} from '../life-cycle-edit-modal';
+
 const columns = [{
   title: 'Date',
   dataIndex: 'date',
@@ -33,7 +36,17 @@ const columns = [{
 }, {
   title: 'Destination',
   dataIndex: 'destination',
-  key: 'destination'
+  key: 'destination',
+  render: (destination) => (
+    <span
+      className={destination === DESTINATIONS.DELETION
+        ? 'cp-error'
+        : ''
+      }
+    >
+      {destination}
+    </span>
+  )
 }, {
   title: 'Prolongation, days',
   dataIndex: 'prolongation',