Skip to content

Commit

Permalink
GUI Glacier lifecycle rules modal: add Glacier_IR file size restricti…
Browse files Browse the repository at this point in the history 
…ons warning
  • Loading branch information
@AleksandrGorodetskii
AleksandrGorodetskii committed Oct 2, 2023
1 parent 95e22aa commit 627f1c3
Showing 1 changed file with 149 additions and 120 deletions.
269 changes: 149 additions & 120 deletions client/src/components/pipelines/browser/forms/life-cycle-rules/forms/transitions-form.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* Copyright 2017-2022 EPAM Systems, Inc. (https://www.epam.com/)
* Copyright 2017-2023 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.
Expand All @@ -23,7 +23,8 @@ import {
Select,
Input,
Button,
Icon
Icon,
Alert
} from 'antd';
import moment from 'moment-timezone';
import {DESTINATIONS} from '../modals';
Expand Down Expand Up @@ -52,6 +53,13 @@ class TransitionsForm extends React.Component {
return transitions.filter(Boolean).length >= LIMIT_TRANSITIONS;
}

get formDestinations () {
const {transitions} = this.state;
const {form} = this.props;
return transitions
.map((_, index) => form.getFieldValue(`transitions[${index}].storageClass`));
}

componentDidMount () {
this.setFormInitialValues();
}
Expand Down Expand Up @@ -125,131 +133,152 @@ class TransitionsForm extends React.Component {
return TRANSITION_PERIOD.after;
};

renderTransitionWarnings = () => {
if (this.formDestinations.some(value => DESTINATIONS[value] === DESTINATIONS.GLACIER_IR)) {
return (
<Alert
message={(
<p>
Due to the AWS restrictions, files smaller
than <b>128 kB</b> will not be transitioned to
the <b>Glacier Instant Retrieval</b> layer
</p>
)}
type="warning"
/>
);
}
return null;
};

render () {
const {form} = this.props;
const {transitions} = this.state;
return (
<div>
{(transitions || []).map((transition, index) => {
if (!transition) {
return null;
}
return (
<div
key={`transitionRule-${index}`}
className={styles.transitionRuleRow}
>
<div style={{display: 'flex', alignItems: 'center'}}>
<span style={{margin: '0px 5px 0px 10px', fontWeight: 'bold'}}>
Destination:
</span>
<Form.Item
className={styles.transitionFormItem}
style={{marginRight: 15}}
>
{form.getFieldDecorator(`transitions[${index}].storageClass`, {
initialValue: transition.storageClass,
rules: [{
required: true,
message: ' '
}]
})(
<Select className={styles.destinationSelect}>
{Object.entries(DESTINATIONS).map(([key, description]) => (
<Select.Option
value={key}
key={key}
>
{description}
</Select.Option>
))}
</Select>
)}
</Form.Item>
</div>
<div className={styles.transitionDateBlock}>
<span style={{marginRight: 10, fontWeight: 'bold'}}>
Date:
</span>
<div style={{display: 'flex'}}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Radio
onChange={e => this.onChangeTransitionDateType(e, index)}
style={{marginRight: 0}}
value={TRANSITION_PERIOD.after}
checked={this.getTransitionDateType(index) === TRANSITION_PERIOD.after}
>
After
</Radio>
<Form.Item
className={styles.transitionFormItem}
>
{form.getFieldDecorator(`transitions[${index}].transitionAfterDays`, {
initialValue: transition.transitionAfterDays,
rules: [{
required: this.getTransitionDateType(index) === TRANSITION_PERIOD.after,
message: ' '
}]
})(
<Input
style={{minWidth: '35px'}}
disabled={this.getTransitionDateType(index) !== TRANSITION_PERIOD.after}
/>
)}
</Form.Item>
<span style={{margin: '0 15px 0 5px'}}>
days
</span>
</div>
<div style={{display: 'flex', alignItems: 'center'}}>
<Radio
onChange={e => this.onChangeTransitionDateType(e, index)}
style={{marginRight: 0}}
value={TRANSITION_PERIOD.at}
checked={this.getTransitionDateType(index) === TRANSITION_PERIOD.at}
>
At
</Radio>
<Form.Item
className={styles.transitionFormItem}
>
{form.getFieldDecorator(`transitions[${index}].transitionDate`, {
initialValue: transition.transitionDate
? moment(transition.transitionDate)
: undefined,
rules: [{
required: this.getTransitionDateType(index) === TRANSITION_PERIOD.at,
message: ' '
}]
})(
<DatePicker
disabled={this.getTransitionDateType(index) !== TRANSITION_PERIOD.at}
style={{marginRight: 15, minWidth: 90}}
/>
)}
</Form.Item>
<div style={{display: 'flex', flexDirection: 'column'}}>
<div>
{(transitions || []).map((transition, index) => {
if (!transition) {
return null;
}
return (
<div
key={`transitionRule-${index}`}
className={styles.transitionRuleRow}
>
<div style={{display: 'flex', alignItems: 'center'}}>
<span style={{margin: '0px 5px 0px 10px', fontWeight: 'bold'}}>
Destination:
</span>
<Form.Item
className={styles.transitionFormItem}
style={{marginRight: 15}}
>
{form.getFieldDecorator(`transitions[${index}].storageClass`, {
initialValue: transition.storageClass,
rules: [{
required: true,
message: ' '
}]
})(
<Select className={styles.destinationSelect}>
{Object.entries(DESTINATIONS).map(([key, description]) => (
<Select.Option
value={key}
key={key}
>
{description}
</Select.Option>
))}
</Select>
)}
</Form.Item>
</div>
<div className={styles.transitionDateBlock}>
<span style={{marginRight: 10, fontWeight: 'bold'}}>
Date:
</span>
<div style={{display: 'flex'}}>
<div style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
<Radio
onChange={e => this.onChangeTransitionDateType(e, index)}
style={{marginRight: 0}}
value={TRANSITION_PERIOD.after}
checked={this.getTransitionDateType(index) === TRANSITION_PERIOD.after}
>
After
</Radio>
<Form.Item
className={styles.transitionFormItem}
>
{form.getFieldDecorator(`transitions[${index}].transitionAfterDays`, {
initialValue: transition.transitionAfterDays,
rules: [{
required: this.getTransitionDateType(index) === TRANSITION_PERIOD.after,
message: ' '
}]
})(
<Input
style={{minWidth: '35px'}}
disabled={this.getTransitionDateType(index) !== TRANSITION_PERIOD.after}
/>
)}
</Form.Item>
<span style={{margin: '0 15px 0 5px'}}>
days
</span>
</div>
<div style={{display: 'flex', alignItems: 'center'}}>
<Radio
onChange={e => this.onChangeTransitionDateType(e, index)}
style={{marginRight: 0}}
value={TRANSITION_PERIOD.at}
checked={this.getTransitionDateType(index) === TRANSITION_PERIOD.at}
>
At
</Radio>
<Form.Item
className={styles.transitionFormItem}
>
{form.getFieldDecorator(`transitions[${index}].transitionDate`, {
initialValue: transition.transitionDate
? moment(transition.transitionDate)
: undefined,
rules: [{
required: this.getTransitionDateType(index) === TRANSITION_PERIOD.at,
message: ' '
}]
})(
<DatePicker
disabled={this.getTransitionDateType(index) !== TRANSITION_PERIOD.at}
style={{marginRight: 15, minWidth: 90}}
/>
)}
</Form.Item>
</div>
</div>
</div>
<Button
type="danger"
onClick={() => this.removeTransitionRule(index)}
className={styles.deleteTransitionBtn}
disabled={!this.removeTransitionsEnabled}
>
<Icon type="delete" />
</Button>
</div>
<Button
type="danger"
onClick={() => this.removeTransitionRule(index)}
className={styles.deleteTransitionBtn}
disabled={!this.removeTransitionsEnabled}
>
<Icon type="delete" />
</Button>
</div>
);
})}
<Button
onClick={() => this.addTransitionRule({})}
className={styles.addTransitionRuleBtn}
disabled={this.limitTransitionsReached}
>
<Icon type="plus" />
Add
</Button>
);
})}
<Button
onClick={() => this.addTransitionRule({})}
className={styles.addTransitionRuleBtn}
disabled={this.limitTransitionsReached}
>
<Icon type="plus" />
Add
</Button>
</div>
{this.renderTransitionWarnings()}
</div>
);
}
Expand Down

0 comments on commit 627f1c3

Please sign in to comment.