Skip to content

Commit ac48d5f

Browse files
openshift-merge-bot[bot]openshift-merge-bot[bot]
authored
Merge pull request #156 from alanconway/clean-1119-ui
fix: NO-JIRA: Clean up UI wording and use of <Trans>
2 parents 2303ce6 + 28fae4d commit ac48d5f

6 files changed

Lines changed: 75 additions & 67 deletions

File tree

‎web/locales/en/plugin__troubleshooting-panel-console-plugin.json‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
{
2-
"<0><0><0>Age</0><1>Return only results more recent than the specified age.</1></0><1><0>Range</0><1>Return only results in the specified time range.</1></1></0>": "<0><0><0>Age</0><1>Return only results more recent than the specified age.</1></0><1><0>Range</0><1>Return only results in the specified time range.</1></1></0>",
3-
"<0><0><0>Distance</0><1>Find all related items up to the specified distance.</1></0><1><0>Goal Class</0><1>Find all paths to items of the specified goal class.</1></1></0>": "<0><0><0>Distance</0><1>Find all related items up to the specified distance.</1></0><1><0>Goal Class</0><1>Find all paths to items of the specified goal class.</1></1></0>",
4-
"<0>Selects the starting point for correlation search. The query is set by the<1>Focus</1> button or you can edit it manually.</0>": "<0>Selects the starting point for correlation search. The query is set by the<1>Focus</1> button or you can edit it manually.</0>",
52
"Advanced": "Advanced",
6-
"Age": "Age",
73
"Correlation result was empty.": "Correlation result was empty.",
8-
"Create a graph of correlated items from resources in the current view.": "Create a graph of correlated items from resources in the current view.",
4+
"Create a graph of correlated items from resources in the current view.": "Create a graph of correlated items from resources in the curret view.",
95
"Distance": "Distance",
10-
"Find related resources.": "Find related resources.",
6+
"Find all paths to items of the specified goal class.": "Find all paths to items of the specified goal class.",
7+
"Find all related data that can be reached by following up to N correlation rules. Follows rules from the start to directly related data, then from there to indirectly related data, up to the disance you specify.": "Find all related data that can be reached by following up to N correlation rules. Follows rules from the start to directly related data, then from there to indirectly related data, up to the disance you specify.",
118
"Focus": "Focus",
129
"Goal Class": "Goal Class",
1310
"Korrel8r Error": "Korrel8r Error",
@@ -16,14 +13,19 @@
1613
"No Correlated Signals Found": "No Correlated Signals Found",
1714
"Open the Troubleshooting Panel": "Open the Troubleshooting Panel",
1815
"Query": "Query",
16+
"Quickly diagnose and resolve issues by exploring correlated observability signals for resources.": "Quickly diagnose and resolve issues by exploring correlated observability signals for resources.",
1917
"Range": "Range",
18+
"Recent": "Recent",
2019
"Refresh the graph using the current settings": "Refresh the graph using the current settings",
2120
"Request Failed": "Request Failed",
21+
"Return only results in the specified time range.": "Return only results in the specified time range.",
22+
"Return only results more recent than the specified duration.": "Return only results more recent than the specified duration.",
2223
"Search Type": "Search Type",
24+
"Selects the starting point for correlation search. This query is set automatically by the <1>Focus</1> button. You can edit it manually to specify a custom query.": "Selects the starting point for correlation search. This query is set automatically by the <1>Focus</1> button. You can edit it manually to specify a custom query.",
2325
"The current view does not support correlation.": "The current view does not support correlation.",
2426
"Time": "Time",
2527
"to": "to",
2628
"Troubleshooting": "Troubleshooting",
2729
"Troubleshooting Panel": "Troubleshooting Panel",
2830
"Unable to find Console Link": "Unable to find Console Link"
29-
}
31+
}

‎web/src/components/Korrel8rPanel.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,12 @@ export default function Korrel8rPanel() {
139139
<>
140140
{t('Query')}
141141
<FieldLevelHelp header={t('Query')}>
142-
<Trans t={t}>
143-
<p>
144-
Selects the starting point for correlation search. The query is set by the
145-
<code>Focus</code> button or you can edit it manually.
146-
</p>
147-
</Trans>
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>
148148
</FieldLevelHelp>
149149
</>
150150
);

‎web/src/components/Popover.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import { useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
2+
import { Button, Flex, FlexItem, Title } from '@patternfly/react-core';
3+
import { TimesCircleIcon } from '@patternfly/react-icons';
14
import * as React from 'react';
2-
import Korrel8rPanel from './Korrel8rPanel';
3-
import './popover.css';
5+
import { useTranslation } from 'react-i18next';
46
import { useDispatch, useSelector } from 'react-redux';
5-
import { Button, Title, Flex, FlexItem } from '@patternfly/react-core';
6-
import { TimesCircleIcon } from '@patternfly/react-icons';
7-
import { State } from '../redux-reducers';
87
import { closeTP } from '../redux-actions';
9-
import { useTranslation } from 'react-i18next';
10-
import { useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
8+
import { State } from '../redux-reducers';
9+
import { HelpPopover } from './HelpPopover';
10+
import Korrel8rPanel from './Korrel8rPanel';
11+
import './popover.css';
1112

1213
export default function Popover() {
1314
const dispatch = useDispatch();
@@ -39,8 +40,14 @@ export default function Popover() {
3940
>
4041
<Flex className="tp-plugin__popover-title-bar" gap={{ default: 'gapNone' }}>
4142
<FlexItem grow={{ default: 'grow' }}>
42-
<Title headingLevel="h1">{t('Troubleshooting')}</Title>
43-
<p>{t('Find related resources.')}</p>
43+
<Title headingLevel="h1">
44+
{t('Troubleshooting')}
45+
<HelpPopover
46+
header={t(
47+
'Quickly diagnose and resolve issues by exploring correlated observability signals for resources.',
48+
)}
49+
></HelpPopover>
50+
</Title>
4451
</FlexItem>
4552
<FlexItem>
4653
<Button variant="plain" aria-label="Close" onClick={close}>

‎web/src/components/SearchFormGroup.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
TextInput,
1111
} from '@patternfly/react-core';
1212
import * as React from 'react';
13-
import { TFunction, Trans } from 'react-i18next';
13+
import { TFunction } from 'react-i18next';
1414
import { Search, SearchType } from '../redux-actions';
1515
import { Chooser } from './Chooser';
1616
import { HelpPopover } from './HelpPopover';
@@ -82,22 +82,22 @@ export const SearchFormGroup: React.FC<SearchFormGroupProps> = ({
8282

8383
const help = (
8484
<HelpPopover header={label}>
85-
<Trans t={t}>
86-
<DescriptionList>
87-
<DescriptionListGroup>
88-
<DescriptionListTerm>Distance</DescriptionListTerm>
89-
<DescriptionListDescription>
90-
Find all related items up to the specified distance.
91-
</DescriptionListDescription>
92-
</DescriptionListGroup>
93-
<DescriptionListGroup>
94-
<DescriptionListTerm>Goal Class</DescriptionListTerm>
95-
<DescriptionListDescription>
96-
Find all paths to items of the specified goal class.
97-
</DescriptionListDescription>
98-
</DescriptionListGroup>
99-
</DescriptionList>
100-
</Trans>
85+
<DescriptionList>
86+
<DescriptionListGroup>
87+
<DescriptionListTerm>Distance</DescriptionListTerm>
88+
<DescriptionListDescription>
89+
{t(
90+
'Follows correlation rules from the starting point to find related data, then continues the search from that data, up to the number of steps you specify.',
91+
)}
92+
</DescriptionListDescription>
93+
</DescriptionListGroup>
94+
<DescriptionListGroup>
95+
<DescriptionListTerm>Goal Class</DescriptionListTerm>
96+
<DescriptionListDescription>
97+
{t('Find all paths to items of the specified goal class.')}
98+
</DescriptionListDescription>
99+
</DescriptionListGroup>
100+
</DescriptionList>
101101
</HelpPopover>
102102
);
103103

‎web/src/components/TimeRangeFormGroup.tsx‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
NumberInput,
88
} from '@patternfly/react-core';
99
import * as React from 'react';
10-
import { TFunction, Trans } from 'react-i18next';
10+
import { TFunction } from 'react-i18next';
1111
import * as time from '../time';
1212
import { Chooser } from './Chooser';
1313
import { DateTimePicker } from './DateTimePicker';
@@ -26,7 +26,7 @@ interface TimeRangeFormGroupProps {
2626

2727
// FIXME put back Validator;;;
2828

29-
const AGE = 'duration';
29+
const RECENT = 'duration';
3030
const RANGE = 'range';
3131

3232
const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
@@ -37,15 +37,16 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
3737
defaultDuration = new time.Duration(1, time.DAY),
3838
defaultRange = new time.Range(...new time.Duration(1, time.DAY).startEnd()),
3939
}) => {
40-
const type = period instanceof time.Duration ? AGE : RANGE;
41-
const duration = type === AGE ? (period as time.Duration) : defaultDuration;
40+
const type = period instanceof time.Duration ? RECENT : RANGE;
41+
const duration = type === RECENT ? (period as time.Duration) : defaultDuration;
4242
const range = type === RANGE ? (period as time.Range) : defaultRange;
4343

4444
const onChangeDuration = (d: number) =>
4545
onChange(new time.Duration(Math.max(1, d), duration.unit));
4646

47-
const agePicker = (
47+
const recentPicker = (
4848
<>
49+
Since
4950
<NumberInput
5051
value={duration.count}
5152
min={0}
@@ -58,6 +59,7 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
5859
unit={duration.unit}
5960
onChange={(unit: time.Unit) => onChange(new time.Duration(duration.count, unit))}
6061
/>
62+
ago
6163
</>
6264
);
6365

@@ -80,25 +82,22 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
8082
</>
8183
);
8284

83-
// FIXME allow empty begin/end of range?
8485
const help = (
8586
<HelpPopover header={label}>
86-
<Trans t={t}>
87-
<DescriptionList>
88-
<DescriptionListGroup>
89-
<DescriptionListTerm>Age</DescriptionListTerm>
90-
<DescriptionListDescription>
91-
Return only results more recent than the specified age.
92-
</DescriptionListDescription>
93-
</DescriptionListGroup>
94-
<DescriptionListGroup>
95-
<DescriptionListTerm>Range</DescriptionListTerm>
96-
<DescriptionListDescription>
97-
Return only results in the specified time range.
98-
</DescriptionListDescription>
99-
</DescriptionListGroup>
100-
</DescriptionList>
101-
</Trans>
87+
<DescriptionList>
88+
<DescriptionListGroup>
89+
<DescriptionListTerm>{t('Recent')}</DescriptionListTerm>
90+
<DescriptionListDescription>
91+
{t('Return only results more recent than the specified duration.')}
92+
</DescriptionListDescription>
93+
</DescriptionListGroup>
94+
<DescriptionListGroup>
95+
<DescriptionListTerm>{t('Range')}</DescriptionListTerm>
96+
<DescriptionListDescription>
97+
{t('Return only results in the specified time range.')}
98+
</DescriptionListDescription>
99+
</DescriptionListGroup>
100+
</DescriptionList>
102101
</HelpPopover>
103102
);
104103

@@ -111,13 +110,13 @@ const TimeRangeFormGroup: React.FC<TimeRangeFormGroupProps> = ({
111110
>
112111
<Chooser
113112
selectedID={type}
114-
onChange={(id: string) => onChange(id === AGE ? duration : range)}
113+
onChange={(id: string) => onChange(id === RECENT ? duration : range)}
115114
items={[
116-
{ id: AGE, label: t('Age') },
115+
{ id: RECENT, label: t('Recent') },
117116
{ id: RANGE, label: t('Range') },
118117
]}
119118
/>
120-
{type === AGE ? agePicker : rangePicker}
119+
{type === RECENT ? recentPicker : rangePicker}
121120
</FormGroup>
122121
);
123122
};

‎web/src/korrel8r/types.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import * as api from './client';
33

44
export class Class {
5-
constructor(public domain: string, public name: string) { }
5+
constructor(public domain: string, public name: string) {}
66

77
query(selector: string) {
88
return new Query(this, selector);
@@ -90,7 +90,7 @@ export class Constraint {
9090

9191
// Domain converts between Korrel8r queries and URLs for a Korrel8r domain.
9292
export abstract class Domain {
93-
constructor(public name: string) { }
93+
constructor(public name: string) {}
9494

9595
/** Construct a Class object for this domain.
9696
* @throw {TypeError} if the name is not valid.
@@ -266,7 +266,7 @@ export class Node {
266266
}
267267

268268
export class Edge {
269-
constructor(public start: Node, public goal: Node, public rules: Rule[] = []) { }
269+
constructor(public start: Node, public goal: Node, public rules: Rule[] = []) {}
270270
}
271271

272272
export class QueryCount {

0 commit comments

Comments
 (0)