Add link to vmware ui

Signed-off-by: yaacov <kobi.zamir@gmail.com>

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -200,7 +200,7 @@
   "Issuer": "Issuer",
   "Kubernetes name of the new migration Plan resource": "Kubernetes name of the new migration Plan resource",
   "Label": "Label",
-  "Link for the Red Hat Virtualization Manager (RHVM) landing page. For example, https://rhv-host-example.com/ovirt-engine.": "Link for the Red Hat Virtualization Manager (RHVM) landing page. For example, https://rhv-host-example.com/ovirt-engine.",
+  "Link for the provider Virtualization Manager landing page. For example, https://rhv-host-example.com/ovirt-engine.": "Link for the provider Virtualization Manager landing page. For example, https://rhv-host-example.com/ovirt-engine.",
   "List of objects depended by this object. If ALL objects in the list have been deleted,\n    this object will be garbage collected. If this object is managed by a controller,\n    then an entry in this list will point to this controller, with the controller field set to true.\n    There cannot be more than one managing controller.": "List of objects depended by this object. If ALL objects in the list have been deleted,\n    this object will be garbage collected. If this object is managed by a controller,\n    then an entry in this list will point to this controller, with the controller field set to true.\n    There cannot be more than one managing controller.",
   "Loading": "Loading",
   "Loading...": "Loading...",
@@ -506,6 +506,7 @@
   "VM(s) with NICs that are not linked with a NIC profile were detected.": "VM(s) with NICs that are not linked with a NIC profile were detected.",
   "VMs": "VMs",
   "VMware only: vSphere product name.": "VMware only: vSphere product name.",
+  "VMware UI": "VMware UI",
   "VMware Virtual Disk Development Kit (VDDK) image, for example: quay.io/kubev2v/vddk:latest .": "VMware Virtual Disk Development Kit (VDDK) image, for example: quay.io/kubev2v/vddk:latest .",
   "Volume Types": "Volume Types",
   "Volumes": "Volumes",

packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderUI/EditProviderUIModal.tsx

@@ -21,11 +21,11 @@ export type EditProviderUIModalProps = Modify<
 
 export const EditProviderUIModal: React.FC<EditProviderUIModalProps> = (props) => {
   switch (props.resource?.spec?.type) {
+    case 'vsphere':
     case 'ovirt':
       return <OvirtEditUIModal {...props} />;
     case 'openshift':
     case 'openstack':
-    case 'vsphere':
     default:
       return <></>;
   }

packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderUI/OvirtEditUIModal.tsx

@@ -15,17 +15,8 @@ export const OvirtEditUIModal: React.FC<EditProviderUIModalProps> = (props) => {
 
   const ModalBody = (
     <ForkliftTrans>
-      <p>Link for the Red Hat Virtualization Manager (RHVM) landing page.</p>
-      <br />
-      <p>Use this link to access the RHVM user interface for RHV VMs management.</p>
-      <br />
-      <p>
-        The format of the provided link for the Red Hat Virtualization Manager (RHVM) landing page
-        should include a scheme, a domain name, path, and optionally a port. Usually the path will
-        end with /ovirt-engine, for example:{' '}
-        <strong>https://rhv-host-example.com/ovirt-engine</strong>.
-      </p>
-      <br />
+      <p>Link for the Provider Virtualization Manager landing page.</p>
+      <p>Use this link to access the user interface for the providers virtualization management.</p>
       <p>If no link value is specify then a default auto calculated or an empty value is set.</p>
     </ForkliftTrans>
   );
@@ -40,7 +31,7 @@ export const OvirtEditUIModal: React.FC<EditProviderUIModalProps> = (props) => {
       variant={ModalVariant.large}
       body={ModalBody}
       helperText={t(
-        'Link for the Red Hat Virtualization Manager (RHVM) landing page. For example, https://rhv-host-example.com/ovirt-engine.',
+        'Link for the provider Virtualization Manager landing page. For example, https://rhv-host-example.com/ovirt-engine.',
       )}
       onConfirmHook={patchProviderUI}
       validationHook={validateOvirtUILink}

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

@@ -8,6 +8,7 @@ import { DetailsItem } from '../../../../utils';
 import {
   CreatedAtDetailsItem,
   CredentialsDetailsItem,
+  ExternalManagementLinkDetailsItem,
   NameDetailsItem,
   NamespaceDetailsItem,
   OwnerDetailsItem,
@@ -16,11 +17,13 @@ import {
   VDDKDetailsItem,
 } from './components';
 import { DetailsSectionProps } from './DetailsSection';
+import { getVSphereProviderWebUILink } from './utils';
 
 export const VSphereDetailsSection: React.FC<DetailsSectionProps> = ({ data }) => {
   const { t } = useForkliftTranslation();
 
   const { provider, permissions } = data;
+  const webUILink = getVSphereProviderWebUILink(provider);
 
   return (
     <DescriptionList
@@ -39,7 +42,12 @@ export const VSphereDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =
 
       <NameDetailsItem resource={provider} />
 
-      <NamespaceDetailsItem resource={provider} />
+      <ExternalManagementLinkDetailsItem
+        resource={provider}
+        canPatch={permissions.canPatch}
+        webUILinkText={t(`VMware UI`)}
+        webUILink={webUILink}
+      />
 
       <URLDetailsItem
         resource={provider}
@@ -57,13 +65,15 @@ export const VSphereDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =
         }
       />
 
-      <CredentialsDetailsItem resource={provider} />
+      <NamespaceDetailsItem resource={provider} />
 
       <CreatedAtDetailsItem resource={provider} />
 
-      <VDDKDetailsItem resource={provider} canPatch={permissions.canPatch} />
+      <CredentialsDetailsItem resource={provider} />
 
       <OwnerDetailsItem resource={provider} />
+
+      <VDDKDetailsItem resource={provider} canPatch={permissions.canPatch} />
     </DescriptionList>
   );
 };

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/utils/getOvirtProviderWebUILink.ts

@@ -16,7 +16,7 @@ export const getOvirtProviderWebUILink = (provider: V1beta1Provider): string =>
   }
 
   // Calculate link using API URL
-  const uiLinkRegexp = new RegExp('(?<=ovirt-engine)\\/api(\\/)*$', 'g');
+  const uiLinkRegexp = new RegExp('(?<=ovirt-engine)/api(/)?$', 'g');
   const regexpResult = uiLinkRegexp.exec(provider?.spec?.url);
 
   return provider?.spec?.url && regexpResult

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/utils/getVSphereProviderWebUILink.ts

@@ -0,0 +1,26 @@
+import { V1beta1Provider } from '@kubev2v/types';
+
+import { getProviderUIAnnotation } from './getProviderUIAnnotation';
+
+/**
+ * A function for auto calculating the vSphere UI link.
+ * It extracts the provider's vSphere UI link from the vSphere URL by searching for the URL's
+ */
+export const getVSphereProviderWebUILink = (provider: V1beta1Provider): string => {
+  // Check for custom link
+  const customLink = getProviderUIAnnotation(provider);
+  if (customLink) {
+    return customLink;
+  }
+
+  // Calculate link using API URL
+  const url = provider?.spec?.url || '';
+  const suffix = '/sdk';
+  const newSuffix = '/ui';
+
+  if (url.endsWith(suffix)) {
+    return url.slice(0, -suffix.length) + newSuffix;
+  } else {
+    return url;
+  }
+};

packages/forklift-console-plugin/src/modules/Providers/views/details/components/DetailsSection/utils/index.ts

@@ -1,4 +1,5 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './getOvirtProviderWebUILink';
 export * from './getProviderUIAnnotation';
+export * from './getVSphereProviderWebUILink';
 // @endindex