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

…t storage modal
epam · Aug 25, 2022 · 7b61dfa · 7b61dfa
1 parent f66eff1
commit 7b61dfa
Show file tree

Hide file tree

Showing 21 changed files with 2,025 additions and 4 deletions.
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
@@ -16,6 +16,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import {inject} from 'mobx-react';
 import {computed} from 'mobx';
 import {
@@ -40,6 +41,7 @@ import {
   DataStoragePathInput,
   parseFSMountPath
 } from './DataStoragePathInput';
+import LifeCycleRules from './life-cycle-rules';
 import styles from './DataStorageEditDialog.css';
 
 export const ServiceTypes = {
@@ -347,7 +349,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
@@ -605,6 +608,15 @@ export class DataStorageEditDialog extends React.Component {
                   objectType="DATA_STORAGE" />
               </Tabs.TabPane>
             }
+            {
+              this.props.dataStorage && this.props.dataStorage.id &&
+              <Tabs.TabPane key="transitionRules" tab="Transition rules">
+                <LifeCycleRules
+                  rules={this.props.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,65 @@
+/*
+ * 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;
+}
+