Skip to content

Commit dfbffbd

Browse files
yaacovyaacov
authored
Merge pull request #1154 from kubev2v/dont-show-ui-link-on-non-rhev
🧼 Move web ui link to a new details item
2 parents b229145 + e6707d2 commit dfbffbd

14 files changed

+170
-131
lines changed

Diff for: ‎packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

+1
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@
151151
"Error: this field must be set to a boolean value.": "Error: this field must be set to a boolean value.",
152152
"ESXi": "ESXi",
153153
"Expiration date": "Expiration date",
154+
"External management system": "External management system",
154155
"Failed": "Failed",
155156
"False": "False",
156157
"Features": "Features",

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OVADetailsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DetailsItem } from '../../../../utils';
77

88
import {
99
CreatedAtDetailsItem,
10-
NameAndUiLinkDetailsItem,
10+
NameDetailsItem,
1111
NamespaceDetailsItem,
1212
OwnerDetailsItem,
1313
TypeDetailsItem,
@@ -30,7 +30,7 @@ export const OVADetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
3030

3131
<DetailsItem title={''} content={''} />
3232

33-
<NameAndUiLinkDetailsItem resource={provider} />
33+
<NameDetailsItem resource={provider} />
3434

3535
<NamespaceDetailsItem resource={provider} />
3636

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OpenshiftDetailsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
88
import {
99
CreatedAtDetailsItem,
1010
CredentialsDetailsItem,
11-
NameAndUiLinkDetailsItem,
11+
NameDetailsItem,
1212
NamespaceDetailsItem,
1313
OwnerDetailsItem,
1414
TransferNetworkDetailsItem,
@@ -32,7 +32,7 @@ export const OpenshiftDetailsSection: React.FC<DetailsSectionProps> = ({ data })
3232

3333
<DetailsItem title={''} content={''} />
3434

35-
<NameAndUiLinkDetailsItem resource={provider} />
35+
<NameDetailsItem resource={provider} />
3636

3737
<NamespaceDetailsItem resource={provider} />
3838

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OpenstackDetailsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
88
import {
99
CreatedAtDetailsItem,
1010
CredentialsDetailsItem,
11-
NameAndUiLinkDetailsItem,
11+
NameDetailsItem,
1212
NamespaceDetailsItem,
1313
OwnerDetailsItem,
1414
TypeDetailsItem,
@@ -29,7 +29,7 @@ export const OpenstackDetailsSection: React.FC<DetailsSectionProps> = ({ data })
2929

3030
<DetailsItem title={''} content={''} />
3131

32-
<NameAndUiLinkDetailsItem resource={provider} />
32+
<NameDetailsItem resource={provider} />
3333

3434
<NamespaceDetailsItem resource={provider} />
3535

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/OvirtDetailsSection.tsx

+8-21
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,28 @@
11
import React from 'react';
22
import { useForkliftTranslation } from 'src/utils/i18n';
33

4-
import { V1beta1Provider } from '@kubev2v/types';
54
import { DescriptionList } from '@patternfly/react-core';
65

76
import { DetailsItem } from '../../../../utils';
87

98
import {
109
CreatedAtDetailsItem,
1110
CredentialsDetailsItem,
12-
NameAndUiLinkDetailsItem,
11+
ExternalManagementLinkDetailsItem,
12+
NameDetailsItem,
1313
NamespaceDetailsItem,
1414
OwnerDetailsItem,
1515
TypeDetailsItem,
1616
URLDetailsItem,
1717
} from './components';
1818
import { DetailsSectionProps } from './DetailsSection';
19+
import { getOvirtProviderWebUILink } from './utils';
1920

2021
export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
2122
const { t } = useForkliftTranslation();
2223

2324
const { provider, permissions } = data;
24-
25-
/**
26-
* A function for auto calculating the RHV UI link.
27-
* It extracts the provider's RHV UI link from the RHV URL by searching for the URL's path of
28-
* '/ovirt-engine/api[/]' and cutting out the /api[/] path section.
29-
* If RHV URL is invalid then an empty string is returned
30-
*/
31-
const getProviderUiContent = (provider: V1beta1Provider): string => {
32-
const uiLinkRegexp = new RegExp('(?<=ovirt-engine)\\/api(\\/)*$', 'g');
33-
const regexpResult = uiLinkRegexp.exec(provider?.spec?.url);
34-
35-
return provider?.spec?.url && regexpResult
36-
? provider?.spec?.url.slice(0, uiLinkRegexp.lastIndex - regexpResult[0].length)
37-
: '';
38-
};
25+
const webUILink = getOvirtProviderWebUILink(provider);
3926

4027
return (
4128
<DescriptionList
@@ -45,15 +32,15 @@ export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =>
4532
>
4633
<TypeDetailsItem resource={provider} />
4734

48-
<DetailsItem title={''} content={''} />
49-
50-
<NameAndUiLinkDetailsItem
35+
<ExternalManagementLinkDetailsItem
5136
resource={provider}
5237
canPatch={permissions.canPatch}
5338
webUILinkText={t(`Red Hat Virtualization Manager UI`)}
54-
webUILinkCalcVal={getProviderUiContent(provider)}
39+
webUILink={webUILink}
5540
/>
5641

42+
<NameDetailsItem resource={provider} />
43+
5744
<NamespaceDetailsItem resource={provider} />
5845

5946
<URLDetailsItem

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/VSphereDetailsSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { DetailsItem } from '../../../../utils';
88
import {
99
CreatedAtDetailsItem,
1010
CredentialsDetailsItem,
11-
NameAndUiLinkDetailsItem,
11+
NameDetailsItem,
1212
NamespaceDetailsItem,
1313
OwnerDetailsItem,
1414
TypeDetailsItem,
@@ -37,7 +37,7 @@ export const VSphereDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =
3737
crumbs={['Inventory', 'providers', `${provider.spec.type}`, '[UID]']}
3838
/>
3939

40-
<NameAndUiLinkDetailsItem resource={provider} />
40+
<NameDetailsItem resource={provider} />
4141

4242
<NamespaceDetailsItem resource={provider} />
4343

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/ExternalManagementLinkDetailsItem.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import { EditProviderUIModal, useModal } from 'src/modules/Providers/modals';
3+
import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
4+
5+
import { ExternalLink } from '@kubev2v/common';
6+
import { DescriptionListDescription } from '@patternfly/react-core';
7+
8+
import { DetailsItem } from '../../../../../utils';
9+
10+
import { ProviderDetailsItemProps } from './ProviderDetailsItem';
11+
12+
/**
13+
* @typedef {Object} ExternalManagementLinkDetailsItemProps - extends ProviderDetailsItemProps
14+
*
15+
* @property {string} [webUILinkText - A label text to be displayed as a content.
16+
* @property {string} [webUILink] - provider's management system external link.
17+
*/
18+
export interface ExternalManagementLinkDetailsItemProps extends ProviderDetailsItemProps {
19+
webUILinkText?: string;
20+
webUILink?: string;
21+
}
22+
23+
/**
24+
* Component for displaying the provider management system external link.
25+
*
26+
* @component
27+
* @param {DetailsItemProps} props - The props of the details item.
28+
*/
29+
export const ExternalManagementLinkDetailsItem: React.FC<
30+
ExternalManagementLinkDetailsItemProps
31+
> = ({ resource: provider, moreInfoLink, helpContent, canPatch, webUILinkText, webUILink }) => {
32+
const { t } = useForkliftTranslation();
33+
const { showModal } = useModal();
34+
35+
const defaultHelpContent = (
36+
<ForkliftTrans>
37+
<p>
38+
Use the external management system link to access the web-based user interface for the
39+
provider virtual machine management system.
40+
</p>
41+
<p>You can edit and store the link to the management system to customize the link URL.</p>
42+
</ForkliftTrans>
43+
);
44+
45+
const webUILinkContent = webUILink ? (
46+
<ExternalLink text={webUILinkText} href={webUILink} isInline={true}>
47+
{webUILink}
48+
</ExternalLink>
49+
) : (
50+
<span className="text-muted">
51+
{canPatch && provider?.metadata
52+
? t('Click the pencil for setting provider web UI link')
53+
: t('No value for provider web UI link')}
54+
</span>
55+
);
56+
57+
return (
58+
<DescriptionListDescription>
59+
<DetailsItem
60+
title={t('External management system')}
61+
moreInfoLink={moreInfoLink}
62+
helpContent={helpContent ?? defaultHelpContent}
63+
crumbs={['metadata', 'annotations', 'forklift.konveyor.io/providerUI']}
64+
content={webUILinkContent}
65+
onEdit={
66+
canPatch &&
67+
provider?.metadata &&
68+
(() => showModal(<EditProviderUIModal resource={provider} content={webUILink} />))
69+
}
70+
/>
71+
</DescriptionListDescription>
72+
);
73+
};

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/NamDetailsItem.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { useForkliftTranslation } from 'src/utils/i18n';
3+
4+
import { DescriptionListDescription } from '@patternfly/react-core';
5+
6+
import { DetailsItem } from '../../../../../utils';
7+
8+
import { ProviderDetailsItemProps } from './ProviderDetailsItem';
9+
10+
/**
11+
* Component for displaying the provider name details item.
12+
*
13+
* @component
14+
* @param {DetailsItemProps} props - The props of the details item.
15+
*/
16+
export const NameDetailsItem: React.FC<ProviderDetailsItemProps> = ({
17+
resource: provider,
18+
moreInfoLink,
19+
helpContent,
20+
}) => {
21+
const { t } = useForkliftTranslation();
22+
23+
const defaultMoreInfoLink =
24+
'https://kubernetes.io/docs/concepts/overview/working-with-objects/names';
25+
26+
const defaultHelpContent = `Name is a client-provided string that refers to an object in a resource URL.
27+
Only one object of a given kind can have a given name at a time.
28+
However, if you delete the object, you can make a new object with the same name.`;
29+
30+
const nameContent = provider?.metadata?.name;
31+
32+
return (
33+
<DescriptionListDescription>
34+
<DetailsItem
35+
title={t('Name')}
36+
moreInfoLink={moreInfoLink ?? defaultMoreInfoLink}
37+
helpContent={helpContent ?? defaultHelpContent}
38+
crumbs={['Provider', 'metadata', 'name']}
39+
content={nameContent}
40+
/>
41+
</DescriptionListDescription>
42+
);
43+
};

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/NameAndUiLinkDetailsItem.tsx

-101
This file was deleted.

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/components/index.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
// @index(['./*', /style/g], f => `export * from '${f.path}';`)
22
export * from './CreatedAtDetailsItem';
33
export * from './CredentialsDetailsItem';
4-
export * from './NameAndUiLinkDetailsItem';
4+
export * from './ExternalManagementLinkDetailsItem';
5+
export * from './NamDetailsItem';
56
export * from './NamespaceDetailsItem';
67
export * from './OwnerDetailsItem';
78
export * from './ProviderDetailsItem';

Diff for: ‎packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/index.ts

+2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
// @index(['./*', /style/g], f => `export * from '${f.path}';`)
2+
export * from './components';
23
export * from './DetailsSection';
34
export * from './OpenshiftDetailsSection';
45
export * from './OpenstackDetailsSection';
56
export * from './OVADetailsSection';
67
export * from './OvirtDetailsSection';
8+
export * from './utils';
79
export * from './VSphereDetailsSection';
810
// @endindex

0 commit comments

Comments
 (0)