Skip to content

Commit

Permalink
chore(pf5): migrate rules components
Browse files Browse the repository at this point in the history
  • Loading branch information
@tthvo
tthvo committed Nov 2, 2023
1 parent b353f48 commit 6b66fd9
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 90 deletions.
200 changes: 113 additions & 87 deletions src/app/Rules/CreateRule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,13 @@ import {
CardTitle,
Form,
FormGroup,
FormHelperText,
FormSelect,
FormSelectOption,
Grid,
GridItem,
HelperText,
HelperTextItem,
Popover,
Split,
SplitItem,
Expand Down Expand Up @@ -124,7 +127,7 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
}, [formData]);

const handleNameChange = React.useCallback(
(name: string) =>
(_, name: string) =>
setFormData((old) => ({
...old,
name,
Expand All @@ -138,12 +141,12 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
);

const handleDescriptionChange = React.useCallback(
(description: string) => setFormData((old) => ({ ...old, description })),
(_, description: string) => setFormData((old) => ({ ...old, description })),
[setFormData],
);

const handleMatchExpressionChange = React.useCallback(
(matchExpression: string) => {
(_, matchExpression: string) => {
matchExprService.setSearchExpression(matchExpression);
setFormData((old) => ({ ...old, matchExpression }));
},
Expand All @@ -156,52 +159,53 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
);

const handleEnabledChange = React.useCallback(
(enabled: boolean) => setFormData((old) => ({ ...old, enabled })),
(_, enabled: boolean) => setFormData((old) => ({ ...old, enabled })),
[setFormData],
);

const handleMaxAgeChange = React.useCallback(
(maxAge: string) => setFormData((old) => ({ ...old, maxAge: Number(maxAge) })),
(_, maxAge: string) => setFormData((old) => ({ ...old, maxAge: Number(maxAge) })),
[setFormData],
);

const handleMaxAgeUnitChange = React.useCallback(
(maxAgeUnit: string) => setFormData((old) => ({ ...old, maxAgeUnit: Number(maxAgeUnit) })),
(_, maxAgeUnit: string) => setFormData((old) => ({ ...old, maxAgeUnit: Number(maxAgeUnit) })),
[setFormData],
);

const handleMaxSizeChange = React.useCallback(
(maxSize: string) => setFormData((old) => ({ ...old, maxSize: Number(maxSize) })),
(_, maxSize: string) => setFormData((old) => ({ ...old, maxSize: Number(maxSize) })),
[setFormData],
);

const handleMaxSizeUnitChange = React.useCallback(
(maxSizeUnit: string) => setFormData((old) => ({ ...old, maxSizeUnit: Number(maxSizeUnit) })),
(_, maxSizeUnit: string) => setFormData((old) => ({ ...old, maxSizeUnit: Number(maxSizeUnit) })),
[setFormData],
);

const handleArchivalPeriodChange = React.useCallback(
(archivalPeriod: string) => setFormData((old) => ({ ...old, archivalPeriod: Number(archivalPeriod) })),
(_, archivalPeriod: string) => setFormData((old) => ({ ...old, archivalPeriod: Number(archivalPeriod) })),
[setFormData],
);

const handleArchivalPeriodUnitsChange = React.useCallback(
(archivalPeriodUnit: string) => setFormData((old) => ({ ...old, archivalPeriodUnit: Number(archivalPeriodUnit) })),
(_, archivalPeriodUnit: string) =>
setFormData((old) => ({ ...old, archivalPeriodUnit: Number(archivalPeriodUnit) })),
[setFormData],
);

const handleInitialDelayChange = React.useCallback(
(initialDelay: string) => setFormData((old) => ({ ...old, initialDelay: Number(initialDelay) })),
(_, initialDelay: string) => setFormData((old) => ({ ...old, initialDelay: Number(initialDelay) })),
[setFormData],
);

const handleInitialDelayUnitsChanged = React.useCallback(
(initialDelayUnit: string) => setFormData((old) => ({ ...old, initialDelayUnit: Number(initialDelayUnit) })),
(_, initialDelayUnit: string) => setFormData((old) => ({ ...old, initialDelayUnit: Number(initialDelayUnit) })),
[setFormData],
);

const handlePreservedArchivesChange = React.useCallback(
(preservedArchives: string) => setFormData((old) => ({ ...old, preservedArchives: Number(preservedArchives) })),
(_, preservedArchives: string) => setFormData((old) => ({ ...old, preservedArchives: Number(preservedArchives) })),
[setFormData],
);

Expand Down Expand Up @@ -348,15 +352,16 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
kept in the application recording buffer, and how frequently Cryostat should copy the application recording
buffer into Cryostat&apos;s own archived storage.
</Text>
<FormGroup
label="Name"
isRequired
fieldId="rule-name"
helperText="Enter a rule name."
helperTextInvalid="A rule name can contain only letters, numbers, and underscores."
validated={formData.nameValid}
data-quickstart-id="rule-name"
>
<FormGroup label="Name" isRequired fieldId="rule-name" data-quickstart-id="rule-name">
<FormHelperText>
<HelperText>
<HelperTextItem variant={formData.nameValid}>
{formData.nameValid === ValidatedOptions.error
? 'A rule name can contain only letters, numbers, and underscores.'
: 'Enter a rule name.'}
</HelperTextItem>
</HelperText>
</FormHelperText>
<TextInput
value={formData.name}
isDisabled={loading}
Expand All @@ -368,12 +373,15 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
validated={formData.nameValid}
/>
</FormGroup>
<FormGroup
label="Description"
fieldId="rule-description"
helperText="Enter a rule description. This is only used for display purposes to aid in identifying rules and their intentions."
data-quickstart-id="rule-description"
>
<FormGroup label="Description" fieldId="rule-description" data-quickstart-id="rule-description">
<FormHelperText>
<HelperText>
<HelperTextItem>
Enter a rule description. This is only used for display purposes to aid in identifying rules and their
intentions.
</HelperTextItem>
</HelperText>
</FormHelperText>
<TextArea
value={formData.description}
isDisabled={loading}
Expand Down Expand Up @@ -412,19 +420,23 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
}
isRequired
fieldId="rule-matchexpr"
helperText={
evaluating
? 'Evaluating match expression...'
: formData.matchExpressionValid === ValidatedOptions.warning
? `Warning: Match expression matches no targets.`
: `
Enter a match expression. This is a Java-like code snippet that is evaluated against each target
application to determine whether the rule should be applied.`
}
helperTextInvalid="The expression matching failed."
validated={formData.matchExpressionValid}
data-quickstart-id="rule-matchexpr"
>
<FormHelperText>
<HelperText>
<HelperTextItem variant={formData.matchExpressionValid}>
{evaluating
? 'Evaluating match expression...'
: formData.matchExpressionValid === ValidatedOptions.warning
? `Warning: Match expression matches no targets.`
: formData.matchExpressionValid === ValidatedOptions.error
? 'The expression matching failed.'
: `
Enter a match expression. This is a Java-like code snippet that is evaluated against each target
application to determine whether the rule should be applied.`}
</HelperTextItem>
</HelperText>
</FormHelperText>
<TextArea
value={formData.matchExpression}
isDisabled={loading}
Expand All @@ -438,15 +450,16 @@ export const CreateRuleForm: React.FC<CreateRuleFormProps> = (_props) => {
validated={formData.matchExpressionValid}
/>
</FormGroup>
<FormGroup
label="Enabled"
isRequired
fieldId="rule-enabled"
helperText={`Rules take effect when created if enabled and will be matched against all
discovered target applications immediately. When new target applications appear they are
checked against all enabled rules. Disabled rules have no effect but are available to be
enabled in the future.`}
>
<FormGroup label="Enabled" isRequired fieldId="rule-enabled">
<FormHelperText>
<HelperText>
<HelperTextItem>
Rules take effect when created if enabled and will be matched against all discovered target applications
immediately. When new target applications appear they are checked against all enabled rules. Disabled
rules have no effect but are available to be enabled in the future.
</HelperTextItem>
</HelperText>
</FormHelperText>
<Switch
id="rule-enabled"
isDisabled={loading}
Expand All @@ -455,15 +468,16 @@ enabled in the future.`}
onChange={handleEnabledChange}
/>
</FormGroup>
<FormGroup
label="Template"
isRequired
fieldId="recording-template"
validated={!formData.template?.name ? ValidatedOptions.default : ValidatedOptions.success}
helperText="The Event Template to be applied by this Rule against matching target applications."
helperTextInvalid="A Template must be selected"
data-quickstart-id="rule-evt-template"
>
<FormGroup label="Template" isRequired fieldId="recording-template" data-quickstart-id="rule-evt-template">
<FormHelperText>
<HelperText>
<HelperTextItem variant={!formData.template?.name ? ValidatedOptions.default : ValidatedOptions.success}>
{!formData.template?.name
? 'A Template must be selected'
: 'The Event Template to be applied by this Rule against matching target applications.'}
</HelperTextItem>
</HelperText>
</FormHelperText>
<SelectTemplateSelectorForm
selected={selectedSpecifier}
disabled={loading}
Expand All @@ -472,12 +486,14 @@ enabled in the future.`}
onSelect={handleTemplateChange}
/>
</FormGroup>
<FormGroup
label="Maximum Size"
fieldId="maxSize"
helperText="The maximum size of recording data retained in the target application's recording buffer."
data-quickstart-id="rule-max-size"
>
<FormGroup label="Maximum Size" fieldId="maxSize" data-quickstart-id="rule-max-size">
<FormHelperText>
<HelperText>
<HelperTextItem>
The maximum size of recording data retained in the target application's recording buffer.{' '}
</HelperTextItem>
</HelperText>
</FormHelperText>
<Split hasGutter={true}>
<SplitItem isFilled>
<TextInput
Expand Down Expand Up @@ -505,12 +521,14 @@ enabled in the future.`}
</SplitItem>
</Split>
</FormGroup>
<FormGroup
label="Maximum Age"
fieldId="maxAge"
helperText="The maximum age of recording data retained in the target application's recording buffer."
data-quickstart-id="rule-max-age"
>
<FormGroup label="Maximum Age" fieldId="maxAge" data-quickstart-id="rule-max-age">
<FormHelperText>
<HelperText>
<HelperTextItem>
The maximum age of recording data retained in the target application's recording buffer.
</HelperTextItem>
</HelperText>
</FormHelperText>
<Split hasGutter={true}>
<SplitItem isFilled>
<TextInput
Expand Down Expand Up @@ -538,12 +556,14 @@ enabled in the future.`}
</SplitItem>
</Split>
</FormGroup>
<FormGroup
label="Archival Period"
fieldId="archivalPeriod"
helperText="Time between copies of active recording data being pulled into Cryostat archive storage."
data-quickstart-id="rule-archival-period"
>
<FormGroup label="Archival Period" fieldId="archivalPeriod" data-quickstart-id="rule-archival-period">
<FormHelperText>
<HelperText>
<HelperTextItem>
Time between copies of active recording data being pulled into Cryostat archive storage.
</HelperTextItem>
</HelperText>
</FormHelperText>
<Split hasGutter={true}>
<SplitItem isFilled>
<TextInput
Expand Down Expand Up @@ -571,12 +591,15 @@ enabled in the future.`}
</SplitItem>
</Split>
</FormGroup>
<FormGroup
label="Initial Delay"
fieldId="initialDelay"
helperText="Initial delay before archiving starts. The first archived copy will be made this long after the recording is started. The second archived copy will occur one Archival Period later."
data-quickstart-id="rule-initial-delay"
>
<FormGroup label="Initial Delay" fieldId="initialDelay" data-quickstart-id="rule-initial-delay">
<FormHelperText>
<HelperText>
<HelperTextItem>
Initial delay before archiving starts. The first archived copy will be made this long after the recording
is started. The second archived copy will occur one Archival Period later.
</HelperTextItem>
</HelperText>
</FormHelperText>
<Split hasGutter={true}>
<SplitItem isFilled>
<TextInput
Expand Down Expand Up @@ -604,12 +627,15 @@ enabled in the future.`}
</SplitItem>
</Split>
</FormGroup>
<FormGroup
label="Preserved Archives"
fieldId="preservedArchives"
helperText="The number of archived recording copies to preserve in archives for each target application affected by this rule."
data-quickstart-id="rule-preserved-archives"
>
<FormGroup label="Preserved Archives" fieldId="preservedArchives" data-quickstart-id="rule-preserved-archives">
<FormHelperText>
<HelperText>
<HelperTextItem>
The number of archived recording copies to preserve in archives for each target application affected by
this rule.
</HelperTextItem>
</HelperText>
</FormHelperText>
<TextInput
value={formData.preservedArchives}
isDisabled={loading}
Expand Down
4 changes: 2 additions & 2 deletions src/app/Rules/RuleDeleteWarningModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,13 @@ export const RuleDeleteWarningModal = ({
label="Clean"
description={`Clean will stop any Active Recordings that ${ruleName} created.`}
isChecked={clean}
onChange={setClean}
onChange={(_, checked) => setClean(checked)}
/>
<Checkbox
id="do-not-ask-enabled"
label="Don't ask me again"
isChecked={doNotAsk}
onChange={(_event, val) => setDoNotAsk(val)}
onChange={(_event, checked) => setDoNotAsk(checked)}
/>
</Stack>
</Modal>
Expand Down
4 changes: 3 additions & 1 deletion src/app/Rules/Rules.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,9 @@ export const RulesTable: React.FC<RulesTableProps> = (_) => {
<Td key={`automatic-rule-action-${index}`} isActionCell style={{ paddingRight: '0' }}>
<ActionsColumn
items={actionResolver(r)}
menuAppendTo={() => document.getElementById('automated-rule-toolbar') || document.body}
popperProps={{
appendTo: () => document.getElementById('automated-rule-toolbar') || document.body,
}}
/>
</Td>
</Tr>
Expand Down

0 comments on commit 6b66fd9

Please sign in to comment.