Skip to content

Commit e4d5ed9

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #162 from zhuje/ou985-form-align
OU-985: [TroubleshootingPanel] - UI components are misaligned
2 parents 33e076a + e24f64c commit e4d5ed9

3 files changed

Lines changed: 68 additions & 44 deletions

File tree

‎web/src/components/Korrel8rPanel.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
Form,
1414
FormGroup,
1515
TextArea,
16+
Title,
1617
Tooltip,
1718
} from '@patternfly/react-core';
1819
import { CubesIcon, ExclamationCircleIcon, SyncIcon } from '@patternfly/react-icons';
@@ -137,15 +138,17 @@ export default function Korrel8rPanel() {
137138

138139
const queryHelp = (
139140
<>
140-
{t('Query')}
141-
<FieldLevelHelp header={t('Query')}>
142-
<p>
143-
<Trans t={t}>
144-
Selects the starting point for correlation search. This query is set automatically by
145-
the <code>Focus</code> button. You can edit it manually to specify a custom query.
146-
</Trans>
147-
</p>
148-
</FieldLevelHelp>
141+
<Title headingLevel="h4">
142+
{t('Query')}
143+
<FieldLevelHelp header={t('Query')}>
144+
<p>
145+
<Trans t={t}>
146+
Selects the starting point for correlation search. This query is set automatically by
147+
the <code>Focus</code> button. You can edit it manually to specify a custom query.
148+
</Trans>
149+
</p>
150+
</FieldLevelHelp>
151+
</Title>
149152
</>
150153
);
151154

‎web/src/components/SearchFormGroup.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import {
33
DescriptionListDescription,
44
DescriptionListGroup,
55
DescriptionListTerm,
6+
Flex,
7+
FlexItem,
68
FormGroup,
79
InputGroup,
810
InputGroupItem,
911
NumberInput,
1012
TextInput,
13+
Title,
1114
} from '@patternfly/react-core';
1215
import * as React from 'react';
1316
import { TFunction } from 'react-i18next';
@@ -103,13 +106,17 @@ export const SearchFormGroup: React.FC<SearchFormGroupProps> = ({
103106

104107
return (
105108
<FormGroup
106-
label=<>
107-
{label}
108-
{help}
109-
</>
109+
label={
110+
<Title headingLevel="h4">
111+
{label}
112+
{help}
113+
</Title>
114+
}
110115
>
111-
{chooser}
112-
{search.type == SearchType.Distance ? distanceInput : goalInput}
116+
<Flex direction={{ default: 'column' }}>
117+
<FlexItem>{chooser}</FlexItem>
118+
{search.type == SearchType.Distance ? distanceInput : goalInput}
119+
</Flex>
113120
</FormGroup>
114121
);
115122
};

‎web/src/components/TimeRangeFormGroup.tsx‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,13 @@ import {
33
DescriptionListDescription,
44
DescriptionListGroup,
55
DescriptionListTerm,
6+
Flex,
7+
FlexItem,
68
FormGroup,
79
NumberInput,
10+
Text,
11+
TextVariants,
12+
Title,
813
} from '@patternfly/react-core';
914
import * as React from 'react';
1015
import { TFunction } from 'react-i18next';
@@ -45,22 +50,26 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
4550
onChange(new time.Duration(Math.max(1, d), duration.unit));
4651

4752
const recentPicker = (
48-
<>
49-
Since
50-
<NumberInput
51-
value={duration.count}
52-
min={0}
53-
onPlus={() => onChangeDuration(duration.count + 1)}
54-
onMinus={() => onChangeDuration(duration.count - 1)}
55-
onChange={(e) => onChangeDuration(Number((e.target as HTMLInputElement).value))}
56-
widthChars={3}
57-
/>
58-
<TimeUnitPicker
59-
unit={duration.unit}
60-
onChange={(unit: time.Unit) => onChange(new time.Duration(duration.count, unit))}
61-
/>
62-
ago
63-
</>
53+
<Flex>
54+
<FlexItem>
55+
<Text component={TextVariants.h6}> {t('Since')}</Text>
56+
<NumberInput
57+
value={duration.count}
58+
min={0}
59+
onPlus={() => onChangeDuration(duration.count + 1)}
60+
onMinus={() => onChangeDuration(duration.count - 1)}
61+
onChange={(e) => onChangeDuration(Number((e.target as HTMLInputElement).value))}
62+
widthChars={3}
63+
/>
64+
</FlexItem>
65+
<FlexItem>
66+
<Text component={TextVariants.h6}> {t('Ago')}</Text>
67+
<TimeUnitPicker
68+
unit={duration.unit}
69+
onChange={(unit: time.Unit) => onChange(new time.Duration(duration.count, unit))}
70+
/>
71+
</FlexItem>
72+
</Flex>
6473
);
6574

6675
// FXIME allow blank, -toggle.
@@ -103,20 +112,25 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
103112

104113
return (
105114
<FormGroup
106-
label=<>
107-
{label}
108-
{help}
109-
</>
115+
label={
116+
<Title headingLevel="h4">
117+
{label} {help}
118+
</Title>
119+
}
110120
>
111-
<Chooser
112-
selectedID={type}
113-
onChange={(id: string) => onChange(id === RECENT ? duration : range)}
114-
items={[
115-
{ id: RECENT, label: t('Recent') },
116-
{ id: RANGE, label: t('Range') },
117-
]}
118-
/>
119-
{type === RECENT ? recentPicker : rangePicker}
121+
<Flex direction={{ default: 'column' }}>
122+
<FlexItem>
123+
<Chooser
124+
selectedID={type}
125+
onChange={(id: string) => onChange(id === RECENT ? duration : range)}
126+
items={[
127+
{ id: RECENT, label: t('Recent') },
128+
{ id: RANGE, label: t('Range') },
129+
]}
130+
/>
131+
</FlexItem>
132+
<FlexItem>{type === RECENT ? recentPicker : rangePicker}</FlexItem>
133+
</Flex>
120134
</FormGroup>
121135
);
122136
};

0 commit comments

Comments
 (0)