Merge pull request #1123 from sgratch/add-rhv-ui-link

🐾 Provide the RHV UI URL as part of the RHV provider details page

Author: yaacov

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

@@ -136,6 +136,7 @@
   "Edit Provider": "Edit Provider",
   "Edit Provider Credentials": "Edit Provider Credentials",
   "Edit provider credentials.\n    Use this link to edit the providers credentials instead of editing the secret directly.": "Edit provider credentials.\n    Use this link to edit the providers credentials instead of editing the secret directly.",
+  "Edit provider web UI link": "Edit provider web UI link",
   "Edit Snapshot polling interval (seconds)": "Edit Snapshot polling interval (seconds)",
   "Edit StorageMap": "Edit StorageMap",
   "Edit target namespace": "Edit target namespace",
@@ -198,6 +199,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.",
   "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...",
@@ -348,12 +350,14 @@
   "Provider details": "Provider details",
   "Provider inventory": "Provider inventory",
   "Provider resource name": "Provider resource name",
+  "Provider web UI link": "Provider web UI link",
   "Provider YAML": "Provider YAML",
   "Providers": "Providers",
   "Providers default": "Providers default",
   "Providers for virtualization": "Providers for virtualization",
   "Ready": "Ready",
   "Reason": "Reason",
+  "Red Hat Virtualization Manager UI": "Red Hat Virtualization Manager UI",
   "Region": "Region",
   "Regions": "Regions",
   "Remove cutover": "Remove cutover",

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

@@ -5,6 +5,8 @@ import { K8sModel } from '@openshift-console/dynamic-plugin-sdk/lib/api/core-api
 
 import { EditModalProps } from '../EditModal';
 
+import { OvirtEditUIModal } from './OvirtEditUIModal';
+
 export type EditProviderUIModalProps = Modify<
   EditModalProps,
   {
@@ -20,6 +22,7 @@ export type EditProviderUIModalProps = Modify<
 export const EditProviderUIModal: React.FC<EditProviderUIModalProps> = (props) => {
   switch (props.resource?.spec?.type) {
     case 'ovirt':
+      return <OvirtEditUIModal {...props} />;
     case 'openshift':
     case 'openstack':
     case 'vsphere':

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
+
+import { ProviderModel } from '@kubev2v/types';
+import { ModalVariant } from '@patternfly/react-core';
+
+import { validateOvirtUILink } from '../../utils';
+import { EditModal } from '../EditModal';
+
+import { patchProviderUI } from './utils/patchProviderUI';
+import { EditProviderUIModalProps } from './EditProviderUIModal';
+
+export const OvirtEditUIModal: React.FC<EditProviderUIModalProps> = (props) => {
+  const { t } = useForkliftTranslation();
+
+  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>If no link value is specify then a default auto calculated or an empty value is set.</p>
+    </ForkliftTrans>
+  );
+
+  return (
+    <EditModal
+      {...props}
+      jsonPath={['metadata', 'annotations', 'forklift.konveyor.io/providerUI']}
+      title={props?.title || t('Edit provider web UI link')}
+      label={props?.label || t('Provider web UI link')}
+      model={ProviderModel}
+      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.',
+      )}
+      onConfirmHook={patchProviderUI}
+      validationHook={validateOvirtUILink}
+    />
+  );
+};

packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderUI/index.ts

@@ -1,3 +1,4 @@
 // @index('./*.tsx', f => `export * from '${f.path}';`)
 export * from './EditProviderUIModal';
+export * from './OvirtEditUIModal';
 // @endindex

packages/forklift-console-plugin/src/modules/Providers/modals/EditProviderUI/utils/patchProviderUI.ts

@@ -0,0 +1,37 @@
+import { k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
+
+import { OnConfirmHookType } from '../../EditModal';
+
+/**
+ * Handles the confirmation action for editing a resource annotations.
+ * Adds or updates the 'forklift.konveyor.io/providerUI' annotation in the resource's metadata.
+ *
+ * @param {Object} options - Options for the confirmation action.
+ * @param {Object} options.resource - The resource to be modified.
+ * @param {Object} options.model - The model associated with the resource.
+ * @param {any} options.newValue - The new value for the 'forklift.konveyor.io/providerUI' annotation.
+ * @returns {Promise<Object>} - The modified resource.
+ */
+export const patchProviderUI: OnConfirmHookType = async ({ resource, model, newValue: value }) => {
+  const currentAnnotations = resource?.metadata?.annotations;
+  const newAnnotations = {
+    ...currentAnnotations,
+    'forklift.konveyor.io/providerUI': value || undefined,
+  };
+
+  const op = resource?.metadata?.annotations ? 'replace' : 'add';
+
+  const obj = await k8sPatch({
+    model: model,
+    resource: resource,
+    data: [
+      {
+        op,
+        path: '/metadata/annotations',
+        value: newAnnotations,
+      },
+    ],
+  });
+
+  return obj;
+};

packages/forklift-console-plugin/src/modules/Providers/utils/validators/provider/ovirt/index.ts

@@ -2,5 +2,6 @@
 export * from './ovirtProviderValidator';
 export * from './ovirtSecretFieldValidator';
 export * from './ovirtSecretValidator';
+export * from './validateOvirtUILink';
 export * from './validateOvirtURL';
 // @endindex

packages/forklift-console-plugin/src/modules/Providers/utils/validators/provider/ovirt/validateOvirtUILink.ts

@@ -0,0 +1,47 @@
+import { validateURL, ValidationMsg } from '../../common';
+
+export const validateOvirtUILink = (uiLink: string | number): ValidationMsg => {
+  // For a newly opened form where the field is not set yet, set the validation type to default.
+  if (uiLink === undefined) {
+    return {
+      type: 'default',
+      msg: 'The link of the Red Hat Virtualization Manager (RHVM) landing page. For example, https://rhv-host-example.com/ovirt-engine.',
+    };
+  }
+
+  // Sanity check
+  if (typeof uiLink !== 'string') {
+    return {
+      type: 'error',
+      msg: 'The link for the Red Hat Virtualization Manager (RHVM) landing page is not a string',
+    };
+  }
+
+  const trimmedUrl: string = uiLink.trim();
+  const isValidURL = validateURL(trimmedUrl);
+
+  if (trimmedUrl === '') {
+    return {
+      type: 'warning',
+      msg: 'The link for the Red Hat Virtualization Manager (RHVM) landing page is empty. A default or an empty value will be used.',
+    };
+  }
+
+  if (!isValidURL) {
+    return {
+      type: 'error',
+      msg: 'The link for the Red Hat Virtualization Manager (RHVM) landing page is invalid. It should include the schema and path, for example: https://rhv-host-example.com/ovirt-engine.',
+    };
+  }
+
+  if (!trimmedUrl.endsWith('ovirt-engine') && !trimmedUrl.endsWith('ovirt-engine/'))
+    return {
+      msg: 'The link for the Red Hat Virtualization Manager (RHVM) landing page does not end with a /ovirt-engine path, for example: https://rhv-host-example.com/ovirt-engine.',
+      type: 'warning',
+    };
+
+  return {
+    type: 'success',
+    msg: 'The link for the Red Hat Virtualization Manager (RHVM) landing page. For example, https://rhv-host-example.com/ovirt-engine.',
+  };
+};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { V1beta1Provider } from '@kubev2v/types';
 import { DescriptionList } from '@patternfly/react-core';
 
 import { DetailsItem } from '../../../../utils';
@@ -21,6 +22,21 @@ export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =>
 
   const { provider, permissions } = data;
 
+  /**
+   * A function for auto calculating the RHV UI link.
+   * It extracts the provider's RHV UI link from the RHV URL by searching for the URL's path of
+   * '/ovirt-engine/api[/]' and cutting out the /api[/] path section.
+   * If RHV URL is invalid then an empty string is returned
+   */
+  const getProviderUiContent = (provider: V1beta1Provider): string => {
+    const uiLinkRegexp = new RegExp('(?<=ovirt-engine)\\/api(\\/)*$', 'g');
+    const regexpResult = uiLinkRegexp.exec(provider?.spec?.url);
+
+    return provider?.spec?.url && regexpResult
+      ? provider?.spec?.url.slice(0, uiLinkRegexp.lastIndex - regexpResult[0].length)
+      : '';
+  };
+
   return (
     <DescriptionList
       columnModifier={{
@@ -31,7 +47,12 @@ export const OvirtDetailsSection: React.FC<DetailsSectionProps> = ({ data }) =>
 
       <DetailsItem title={''} content={''} />
 
-      <NameAndUiLinkDetailsItem resource={provider} />
+      <NameAndUiLinkDetailsItem
+        resource={provider}
+        canPatch={permissions.canPatch}
+        webUILinkText={t(`Red Hat Virtualization Manager UI`)}
+        webUILinkCalcVal={getProviderUiContent(provider)}
+      />
 
       <NamespaceDetailsItem resource={provider} />
 

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

@@ -12,14 +12,14 @@ import { ProviderDetailsItemProps } from './ProviderDetailsItem';
 
 /**
  * @typedef {Object} NameDetailsItemProps - extends ProviderDetailsItemProps
-
- * @property {string} [webUILinkText - A text to be displayed as a content.
- * @property {function} [calcWebUILink] - A method for auto calculating the provider's UI path.
- **/
+ *
+ * @property {string} [webUILinkText - A label text to be displayed as a content.
+ * @property {string} [webUILinkCalcVal] - provider's auto calculated UI link (uses as a default if no value is set by the user).
+ */
 
 export interface NameAndUiLinkDetailsItemProps extends ProviderDetailsItemProps {
   webUILinkText?: string;
-  calcWebUILink?: (provider: V1beta1Provider) => string;
+  webUILinkCalcVal?: string;
 }
 
 const getProviderUIAnnotation = (provider: V1beta1Provider): string =>
@@ -40,7 +40,7 @@ export const NameAndUiLinkDetailsItem: React.FC<NameAndUiLinkDetailsItemProps> =
   helpContent,
   canPatch,
   webUILinkText,
-  calcWebUILink,
+  webUILinkCalcVal,
 }) => {
   const { t } = useForkliftTranslation();
   const { showModal } = useModal();
@@ -65,8 +65,7 @@ export const NameAndUiLinkDetailsItem: React.FC<NameAndUiLinkDetailsItemProps> =
   const nameContent = provider?.metadata?.name;
 
   // Read the annotation for getting the web UI link and only if empty, try to auto calculate the provider web UI path
-  const webUILink =
-    getProviderUIAnnotation(provider) ?? (calcWebUILink ? calcWebUILink(provider) : null);
+  const webUILink = getProviderUIAnnotation(provider) ?? webUILinkCalcVal;
 
   const webUILinkContent = (
     <ExternalLink text={webUILinkText} href={webUILink} isInline={true}>