Skip to content

Web console: make retention dialog clearer #14793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vogievetsky merged 5 commits into from
Aug 11, 2023
Merged

Web console: make retention dialog clearer #14793

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0d06348
make retention dialog clearer
vogievetsky Aug 9, 2023
0cb565b
tweak
vogievetsky Aug 9, 2023
1f4e85e
another tweak
vogievetsky Aug 9, 2023
62aa44b
Update web-console/src/dialogs/retention-dialog/retention-dialog.tsx
vogievetsky Aug 10, 2023
c452f92
update snapshot for copy
vogievetsky Aug 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions web-console/src/components/json-input/json-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ interface InternalValue {

interface JsonInputProps {
value: any;
onChange: (value: any) => void;
onChange?: (value: any) => void;
setError?: (error: Error | undefined) => void;
placeholder?: string;
focus?: boolean;
Expand Down Expand Up @@ -123,14 +123,15 @@ export const JsonInput = React.memo(function JsonInput(props: JsonInputProps) {

setError?.(error);
if (!error) {
onChange(value);
onChange?.(value);
}

if (showErrorIfNeeded) {
setShowErrorIfNeeded(false);
}
}}
onBlur={() => setShowErrorIfNeeded(true)}
readOnly={!onChange}
focus={focus}
fontSize={12}
width={width || '100%'}
Expand Down
41 changes: 24 additions & 17 deletions web-console/src/components/rule-editor/rule-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,22 +42,23 @@ const PERIOD_SUGGESTIONS: string[] = ['P1D', 'P7D', 'P1M', 'P1Y', 'P1000Y'];
export interface RuleEditorProps {
rule: Rule;
tiers: string[];
onChange(newRule: Rule): void;
onDelete(): void;
moveUp: (() => void) | undefined;
moveDown: (() => void) | undefined;
onChange?: (newRule: Rule) => void;
onDelete?: () => void;
moveUp?: () => void;
moveDown?: () => void;
}

export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps) {
const { rule, onChange, tiers, onDelete, moveUp, moveDown } = props;
const [isOpen, setIsOpen] = useState(true);
const disabled = !onChange;

function removeTier(key: string) {
const newTierReplicants = { ...rule.tieredReplicants };
delete newTierReplicants[key];

const newRule = { ...rule, tieredReplicants: newTierReplicants };
onChange(newRule);
onChange?.(newRule);
}

function addTier() {
Expand All @@ -72,7 +73,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
}
}

onChange(RuleUtil.addTieredReplicant(rule, newTierName, 1));
onChange?.(RuleUtil.addTieredReplicant(rule, newTierName, 1));
}

function renderTiers() {
Expand All @@ -90,14 +91,15 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
<FormGroup>
{tieredReplicantsList.map(([tier, replication]) => (
<ControlGroup key={tier}>
<Button minimal style={{ pointerEvents: 'none' }}>
<Button minimal disabled={disabled} style={{ pointerEvents: 'none' }}>
Tier:
</Button>
<HTMLSelect
fill
value={tier}
disabled={disabled}
onChange={(e: any) =>
onChange(RuleUtil.renameTieredReplicants(rule, tier, e.target.value))
onChange?.(RuleUtil.renameTieredReplicants(rule, tier, e.target.value))
}
>
<option key={tier} value={tier}>
Expand All @@ -111,27 +113,28 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
</option>
))}
</HTMLSelect>
<Button minimal style={{ pointerEvents: 'none' }}>
<Button minimal disabled={disabled} style={{ pointerEvents: 'none' }}>
Replicants:
</Button>
<NumericInput
value={replication}
disabled={disabled}
onValueChange={(v: number) => {
if (isNaN(v)) return;
onChange(RuleUtil.addTieredReplicant(rule, tier, v));
onChange?.(RuleUtil.addTieredReplicant(rule, tier, v));
}}
min={0}
max={256}
/>
<Button onClick={() => removeTier(tier)} icon={IconNames.TRASH} />
{onChange && <Button onClick={() => removeTier(tier)} icon={IconNames.TRASH} />}
</ControlGroup>
))}
</FormGroup>
);
}

function renderTierAdder() {
const { rule, tiers } = props;
if (!onChange) return;
const disabled = Object.keys(rule.tieredReplicants || {}).length >= Object.keys(tiers).length;

return (
Expand Down Expand Up @@ -163,7 +166,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
<div className="spacer" />
{moveUp && <Button minimal icon={IconNames.ARROW_UP} onClick={moveUp} />}
{moveDown && <Button minimal icon={IconNames.ARROW_DOWN} onClick={moveDown} />}
<Button minimal icon={IconNames.TRASH} onClick={onDelete} />
{onDelete && <Button minimal icon={IconNames.TRASH} onClick={onDelete} />}
</div>

<Collapse isOpen={isOpen}>
Expand All @@ -172,7 +175,8 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
<ControlGroup>
<HTMLSelect
value={rule.type}
onChange={(e: any) => onChange(RuleUtil.changeRuleType(rule, e.target.value))}
disabled={disabled}
onChange={(e: any) => onChange?.(RuleUtil.changeRuleType(rule, e.target.value))}
>
{RuleUtil.TYPES.map(type => (
<option key={type} value={type}>
Expand All @@ -184,9 +188,10 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
<SuggestibleInput
value={rule.period || ''}
sanitizer={durationSanitizer}
disabled={disabled}
onValueChange={period => {
if (typeof period === 'undefined') return;
onChange(RuleUtil.changePeriod(rule, period));
onChange?.(RuleUtil.changePeriod(rule, period));
}}
placeholder={PERIOD_SUGGESTIONS[0]}
suggestions={PERIOD_SUGGESTIONS}
Expand All @@ -197,15 +202,17 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
className="include-future"
checked={rule.includeFuture || false}
label="Include future"
disabled={disabled}
onChange={() => {
onChange(RuleUtil.changeIncludeFuture(rule, !rule.includeFuture));
onChange?.(RuleUtil.changeIncludeFuture(rule, !rule.includeFuture));
}}
/>
)}
{RuleUtil.hasInterval(rule) && (
<InputGroup
value={rule.interval || ''}
onChange={(e: any) => onChange(RuleUtil.changeInterval(rule, e.target.value))}
readOnly={!onChange}
onChange={(e: any) => onChange?.(RuleUtil.changeInterval(rule, e.target.value))}
placeholder="2010-01-01/2020-01-01"
/>
)}
Expand Down
Loading