GUI S3 Objects lifecycle (#2759): add s3 objects lifecycle tab to edi… (

#2792) * GUI S3 Objects lifecycle (#2759): add s3 objects lifecycle tab to edit storage modal * GUI S3 Objects lifecycle (#2759): set required and default values. Validations. Remove system default settings from notify form * GUI S3 Objects lifecycle (#2759): History modal - change filter select to multiselect. Refactoring * GUI S3 Objects lifecycle (#2759): Datastorage metadata panel - add lifecycle rules counter * GUI S3 Objects lifecycle (#2759): Remove STS/LTS durations from storage creation and edit storage forms * GUI S3 Objects lifecycle (#2759): Transition rules tab - sort rules by 'Path'. Mark 'Delete' transitions. Style adjustments * GUI S3 Objects lifecycle (#2759): Disable 'Glob' and 'Root path' inputs when editing an existing rule * GUI S3 Objects lifecycle (#2759): Disable 'Save' button if form values has not changed * GUI S3 Objects lifecycle (#2759): fix new rule creation form modified state check * GUI S3 Objects lifecycle (#2759): Collapse notify panel if method 'ONE_BY_ONE' selected. Minor style adjustments * GUI S3 Objects lifecycle (#2759): add user info to rule history table (prolongations) * GUI S3 Objects lifecycle (#2759): notifications recipients: move from informedUserIds to recipients API field * GUI S3 Objects lifecycle (#2759): 'Use default template' checkbox * S3 objects lifecycle GUI (#2759) - refactoring * S3 objects lifecycle GUI (#2759) - History: root & glob mismatch fixed; "transition rule(s)" text fixed * GUI S3 Objects lifecycle (#2759): Use default template for 'body' and 'subject' from settings * GUI S3 Objects lifecycle (#2759): delete rule - confirm dialog * GUI S3 Objects lifecycle (#2759): delete rule - remove unnecessary async * S3 objects lifecycle GUI (#2759) - History: momentjs warning fix Co-authored-by: Mikhail Rodichenko <Mikhail_Rodichenko@epam.com>
epam · Sep 8, 2022 · b2629bd · b2629bd
1 parent 36779ce
commit b2629bd
Show file tree

Hide file tree

Showing 26 changed files with 2,460 additions and 72 deletions.
diff --git a/client/src/components/pipelines/browser/DataStorage.js b/client/src/components/pipelines/browser/DataStorage.js
@@ -65,6 +65,7 @@ import {
   METADATA_PANEL_KEY
 } from '../../special/splitPanel';
 import Metadata from '../../special/metadata/Metadata';
+import LifeCycleCounter from './forms/life-cycle-rules/life-cycle-counter';
 import PreviewModal from '../../search/preview/preview-modal';
 import {getTiles, getTilesInfo} from '../../search/preview/vsi-preview';
 import UploadButton from '../../special/UploadButton';
@@ -337,8 +338,6 @@ export default class DataStorage extends React.Component {
         this.props.info.value.policySupported &&
         storage.serviceType !== ServiceTypes.fileShare &&
         (
-          storage.longTermStorageDuration !== undefined ||
-          storage.shortTermStorageDuration !== undefined ||
           storage.backupDuration !== undefined ||
           !storage.versioningEnabled
         )
@@ -347,8 +346,6 @@ export default class DataStorage extends React.Component {
         await updatePolicyRequest.send({
           id: this.props.storageId,
           storagePolicy: {
-            longTermStorageDuration: storage.longTermStorageDuration,
-            shortTermStorageDuration: storage.shortTermStorageDuration,
             backupDuration: storage.backupDuration,
             versioningEnabled: storage.versioningEnabled
           }
@@ -2113,26 +2110,6 @@ export default class DataStorage extends React.Component {
                 this.props.info.value.description &&
                 <Row><b>Description: </b>{this.props.info.value.description}</Row>
               }
-              {
-                this.props.info.value.storagePolicy &&
-                this.props.info.value.storagePolicy.shortTermStorageDuration !== undefined
-                  ? (
-                    <Row>
-                      <b>Short-Term Storage duration: </b>
-                      {`${this.props.info.value.storagePolicy.shortTermStorageDuration} days`}
-                    </Row>
-                  ) : undefined
-              }
-              {
-                this.props.info.value.storagePolicy &&
-                this.props.info.value.storagePolicy.longTermStorageDuration !== undefined
-                  ? (
-                    <Row>
-                      <b>Long-Term Storage duration: </b>
-                      {`${this.props.info.value.storagePolicy.longTermStorageDuration} days`}
-                    </Row>
-                  ) : undefined
-              }
             </Row>
             <Row style={{marginLeft: 5}}>
               <DataStorageNavigation
@@ -2199,6 +2176,10 @@ export default class DataStorage extends React.Component {
                   : false
               ].filter(Boolean)}
               extraInfo={[
+                <LifeCycleCounter
+                  storage={this.props.info.value}
+                  path={this.props.path}
+                />,
                 <StorageSize storage={this.props.info.value} />
               ]}
               specialTagsProperties={{

diff --git a/client/src/components/pipelines/browser/Folder.js b/client/src/components/pipelines/browser/Folder.js
@@ -782,8 +782,6 @@ export default class Folder extends localization.LocalizedReactComponent {
       path: path,
       shared: storage.serviceType === ServiceTypes.objectStorage && storage.shared,
       storagePolicy: {
-        longTermStorageDuration: storage.longTermStorageDuration,
-        shortTermStorageDuration: storage.shortTermStorageDuration,
         backupDuration: storage.backupDuration,
         versioningEnabled: storage.versioningEnabled
       },
@@ -846,15 +844,11 @@ export default class Folder extends localization.LocalizedReactComponent {
     } else {
       if (this.state.editableStorage.policySupported &&
         storage.serviceType !== ServiceTypes.fileShare &&
-        (storage.longTermStorageDuration !== undefined ||
-        storage.shortTermStorageDuration !== undefined ||
-        storage.backupDuration !== undefined || !storage.versioningEnabled)) {
+        (storage.backupDuration !== undefined || !storage.versioningEnabled)) {
         const updatePolicyRequest = new DataStorageUpdateStoragePolicy();
         await updatePolicyRequest.send({
           id: this.state.editableStorage.id,
           storagePolicy: {
-            longTermStorageDuration: storage.longTermStorageDuration,
-            shortTermStorageDuration: storage.shortTermStorageDuration,
             backupDuration: storage.backupDuration,
             versioningEnabled: storage.versioningEnabled
           }

diff --git a/client/src/components/pipelines/browser/forms/DataStorageEditDialog.css b/client/src/components/pipelines/browser/forms/DataStorageEditDialog.css
@@ -17,3 +17,10 @@
 .data-storage-form-item {
   margin-bottom: 5px;
 }
+
+.custom-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-align: end;
+}
diff --git a/client/src/components/pipelines/browser/forms/DataStorageEditDialog.js b/client/src/components/pipelines/browser/forms/DataStorageEditDialog.js
@@ -40,6 +40,7 @@ import {
   DataStoragePathInput,
   parseFSMountPath
 } from './DataStoragePathInput';
+import LifeCycleRules from './life-cycle-rules';
 import styles from './DataStorageEditDialog.css';
 
 export const ServiceTypes = {
@@ -158,6 +159,16 @@ export class DataStorageEditDialog extends React.Component {
       : this.props.isNfsMount;
   }
 
+  @computed
+  get transitionRulesAvailable () {
+    const {
+      dataStorage
+    } = this.props;
+    return dataStorage &&
+      dataStorage.id &&
+      /^s3$/i.test(dataStorage.storageType || dataStorage.type);
+  }
+
   @computed
   get awsRegions () {
     return this.props.awsRegions.loaded ? (this.props.awsRegions.value || []).map(r => r) : [];
@@ -221,7 +232,7 @@ export class DataStorageEditDialog extends React.Component {
                   <Button
                     id="edit-storage-dialog-delete-button"
                     type="danger"
-                    onClick={this.openDeleteDialog}>Delete</Button>
+                    onClick={this.openDeleteDialog}>DELETE</Button>
                 )
               }
             </Row>
@@ -230,12 +241,12 @@ export class DataStorageEditDialog extends React.Component {
             <Row type="flex" justify="end">
               <Button
                 id="edit-storage-dialog-cancel-button"
-                onClick={this.props.onCancel}>Cancel</Button>
+                onClick={this.props.onCancel}>CANCEL</Button>
               <Button
                 id="edit-storage-dialog-save-button"
                 type="primary"
                 htmlType="submit"
-                onClick={this.handleSubmit}>Save</Button>
+                onClick={this.handleSubmit}>SAVE</Button>
             </Row>
           </Col>
         </Row>
@@ -347,7 +358,8 @@ export class DataStorageEditDialog extends React.Component {
                 : 'Create object storage'))
         }
         onCancel={this.props.onCancel}
-        width={this.isNfsMount ? '50%' : '33%'}
+        style={{transition: 'width 0.2s ease'}}
+        width={(this.state.activeTab === 'transitionRules' || this.isNfsMount) ? '50%' : '33%'}
         footer={this.state.activeTab === 'info' ? modalFooter : false}>
         <Spin spinning={this.props.pending}>
           <Tabs
@@ -455,38 +467,6 @@ export class DataStorageEditDialog extends React.Component {
                     </Form.Item>
                   )
                 }
-                {
-                  !this.isNfsMount && this.props.policySupported && this.currentRegionSupportsPolicy &&
-                  <Form.Item
-                    className={styles.dataStorageFormItem}
-                    {...this.formItemLayout}
-                    label="STS duration">
-                    {getFieldDecorator('shortTermStorageDuration', {
-                      initialValue: this.props.dataStorage && this.props.dataStorage.storagePolicy
-                        ? this.props.dataStorage.storagePolicy.shortTermStorageDuration : undefined
-                    })(
-                      <InputNumber
-                        style={{width: '100%'}}
-                        disabled={this.props.pending || isReadOnly} />
-                    )}
-                  </Form.Item>
-                }
-                {
-                  !this.isNfsMount && this.props.policySupported && this.currentRegionSupportsPolicy &&
-                  <Form.Item
-                    className={styles.dataStorageFormItem}
-                    {...this.formItemLayout}
-                    label="LTS duration">
-                    {getFieldDecorator('longTermStorageDuration', {
-                      initialValue: this.props.dataStorage && this.props.dataStorage.storagePolicy
-                        ? this.props.dataStorage.storagePolicy.longTermStorageDuration: undefined
-                    })(
-                      <InputNumber
-                        style={{width: '100%'}}
-                        disabled={this.props.pending || isReadOnly} />
-                    )}
-                  </Form.Item>
-                }
                 {
                   !this.isNfsMount &&
                   <Row>
@@ -605,6 +585,13 @@ export class DataStorageEditDialog extends React.Component {
                   objectType="DATA_STORAGE" />
               </Tabs.TabPane>
             }
+            {this.transitionRulesAvailable && (
+              <Tabs.TabPane key="transitionRules" tab="Transition rules">
+                <LifeCycleRules
+                  storageId={this.props.dataStorage.id}
+                />
+              </Tabs.TabPane>
+            )}
           </Tabs>
         </Spin>
         <Modal

diff --git a/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/index.js b/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/index.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2017-2022 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 NotificationForm from './notification-form';
+import TransitionsForm from './transitions-form';
+export {NotificationForm, TransitionsForm};
diff --git a/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/life-cycle-forms.css b/client/src/components/pipelines/browser/forms/life-cycle-rules/forms/life-cycle-forms.css
@@ -0,0 +1,74 @@
+/*
+ * Copyright 2017-2022 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.
+ */
+
+.form-item {
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.notifications-form .code-editor {
+  line-height: 15px;
+  cursor: text;
+}
+
+.notifications-form .code-editor,
+.notifications-form .code-editor div[class~="CodeMirror-scroll"] {
+  min-height: 150px;
+  max-height: 450px;
+}
+
+.transition-form-item {
+  margin-bottom: 0;
+  width: fit-content;
+}
+
+.transition-rule-row {
+  display: flex;
+  flex-direction: revert;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 5px;
+  width: 100%;
+}
+
+.transition-date-block {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+
+.delete-transition-btn {
+  margin-right: 10px;
+}
+
+.add-transition-rule-btn {
+  margin-bottom: 10px;
+  margin-right: 10px;
+  align-self: flex-end;
+}
+
+.transition-form-item .destination-select {
+  width: 280px;
+}
+
+@media (max-width: 1200px) {
+  .transition-form-item .destination-select {
+    width: 140px;
+  }
+}