GUI S3 Objects lifecycle (#2759): Datastorage metadata panel - add li…

…fecycle rules counter
epam · Aug 25, 2022 · 3e4c9e6 · 3e4c9e6
1 parent 174e5be
commit 3e4c9e6
Show file tree

Hide file tree

Showing 5 changed files with 100 additions and 6 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';
@@ -2199,6 +2200,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/forms/DataStorageEditDialog.js b/client/src/components/pipelines/browser/forms/DataStorageEditDialog.js
@@ -608,15 +608,16 @@ export class DataStorageEditDialog extends React.Component {
                   objectType="DATA_STORAGE" />
               </Tabs.TabPane>
             }
-            {
-              this.props.dataStorage && this.props.dataStorage.id &&
+            {this.props.dataStorage &&
+            this.props.dataStorage.id &&
+            /^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>
-            }
+            )}
           </Tabs>
         </Spin>
         <Modal

diff --git a/client/src/components/pipelines/browser/forms/life-cycle-rules/life-cycle-counter.js b/client/src/components/pipelines/browser/forms/life-cycle-rules/life-cycle-counter.js
@@ -0,0 +1,87 @@
+/*
+ * 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 React from 'react';
+import PropTypes from 'prop-types';
+import {message} from 'antd';
+import DataStorageLifeCycleRulesLoad
+  from '../../../../../models/dataStorage/lifeCycleRules/DataStorageLifeCycleRulesLoad';
+
+class LifeCycleCounter extends React.Component {
+  state={
+    rulesAmount: undefined
+  }
+
+  componentDidMount () {
+    this.fetchRulesInfo();
+  }
+
+  componentDidUpdate (prevProps) {
+    if (this.props.storage !== prevProps.storage ||
+      this.props.path !== prevProps.path
+    ) {
+      this.fetchRulesInfo();
+    }
+  }
+
+  get showInfo () {
+    const {storage} = this.props;
+    const {rulesAmount} = this.state;
+    if (storage && rulesAmount) {
+      return /^s3$/i.test(storage.type);
+    }
+    return false;
+  }
+
+  fetchRulesInfo = async () => {
+    const {path, storage} = this.props;
+    const request = new DataStorageLifeCycleRulesLoad(storage.id, path);
+    await request.fetch();
+    if (request.error) {
+      return message.error(request.error, 5);
+    }
+    this.setState({
+      rulesAmount: (request.value || []).length
+    });
+  };
+
+  render () {
+    const {rulesAmount} = this.state;
+    if (!this.showInfo) {
+      return null;
+    }
+    return (
+      <div>
+        <span>
+          Transition rules:
+        </span>
+        <b style={{margin: '0px 3px'}}>
+          {rulesAmount}
+        </b>
+        <span>
+          rules for the folder.
+        </span>
+      </div>
+    );
+  }
+}
+
+LifeCycleCounter.propTypes = {
+  storage: PropTypes.object,
+  path: PropTypes.string
+};
+
+export default LifeCycleCounter;
diff --git a/client/src/components/special/users-roles-select/index.js b/client/src/components/special/users-roles-select/index.js
@@ -77,7 +77,6 @@ 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 => ({

diff --git a/client/src/models/dataStorage/lifeCycleRules/DataStorageLifeCycleRulesLoad.js b/client/src/models/dataStorage/lifeCycleRules/DataStorageLifeCycleRulesLoad.js
@@ -18,11 +18,13 @@ import Remote from '../../basic/Remote';
 
 export default class DataStorageLifeCycleRulesLoad extends Remote {
   url;
+  path;
 
-  constructor (id, path) {
+  constructor (id, path = '') {
     super();
     if (path) {
-      this.url = `/datastorage/${id}/lifecycle/rule?path=${path}`;
+      this.path = path.startsWith('/') ? path : `/${path}`;
+      this.url = `/datastorage/${id}/lifecycle/rule?path=${this.path}`;
     } else {
       this.url = `/datastorage/${id}/lifecycle/rule`;
     }