VM list how to creat info sould be blue

Signed-off-by: Yaacov Zamir <[email protected]>

packages/forklift-console-plugin/src/modules/Providers/views/details/OVirtProviderDetailsPage.tsx

@@ -7,7 +7,7 @@ import { ProviderPageHeadings } from './components';
 import {
   ProviderCredentialsWrapper,
   ProviderDetailsWrapper,
-  ProviderVirtualMachinesWrapper,
+  ProviderVirtualMachines,
   ProviderYAMLPageWrapper,
 } from './tabs';
 
@@ -37,7 +37,7 @@ export const OVirtProviderDetailsPage: React.FC<{ name: string; namespace: strin
     {
       href: 'vms',
       name: t('Virtual Machines'),
-      component: () => <ProviderVirtualMachinesWrapper name={name} namespace={namespace} />,
+      component: () => <ProviderVirtualMachines name={name} namespace={namespace} />,
     },
   ];
 

packages/forklift-console-plugin/src/modules/Providers/views/details/OpenStackProviderDetailsPage.tsx

@@ -7,7 +7,7 @@ import { ProviderPageHeadings } from './components';
 import {
   ProviderCredentialsWrapper,
   ProviderDetailsWrapper,
-  ProviderVirtualMachinesWrapper,
+  ProviderVirtualMachines,
   ProviderYAMLPageWrapper,
 } from './tabs';
 
@@ -37,7 +37,7 @@ export const OpenStackProviderDetailsPage: React.FC<{ name: string; namespace: s
     {
       href: 'vms',
       name: t('Virtual Machines'),
-      component: () => <ProviderVirtualMachinesWrapper name={name} namespace={namespace} />,
+      component: () => <ProviderVirtualMachines name={name} namespace={namespace} />,
     },
   ];
 

packages/forklift-console-plugin/src/modules/Providers/views/details/OpenshiftProviderDetailsPage.tsx

@@ -8,7 +8,7 @@ import {
   ProviderCredentialsWrapper,
   ProviderDetailsWrapper,
   ProviderNetworksWrapper,
-  ProviderVirtualMachinesWrapper,
+  ProviderVirtualMachines,
   ProviderYAMLPageWrapper,
 } from './tabs';
 
@@ -38,7 +38,7 @@ export const OpenshiftProviderDetailsPage: React.FC<{ name: string; namespace: s
     {
       href: 'vms',
       name: t('Virtual Machines'),
-      component: () => <ProviderVirtualMachinesWrapper name={name} namespace={namespace} />,
+      component: () => <ProviderVirtualMachines name={name} namespace={namespace} />,
     },
     {
       href: 'networks',

packages/forklift-console-plugin/src/modules/Providers/views/details/OvaProviderDetailsPage.tsx

@@ -6,7 +6,7 @@ import { HorizontalNav } from '@openshift-console/dynamic-plugin-sdk';
 import { ProviderPageHeadings } from './components';
 import {
   ProviderDetailsWrapper,
-  ProviderVirtualMachinesWrapper,
+  ProviderVirtualMachines,
   ProviderYAMLPageWrapper,
 } from './tabs';
 
@@ -31,7 +31,7 @@ export const OvaProviderDetailsPage: React.FC<{ name: string; namespace: string
     {
       href: 'vms',
       name: t('Virtual Machines'),
-      component: () => <ProviderVirtualMachinesWrapper name={name} namespace={namespace} />,
+      component: () => <ProviderVirtualMachines name={name} namespace={namespace} />,
     },
   ];
 

packages/forklift-console-plugin/src/modules/Providers/views/details/VSphereProviderDetailsPage.tsx

@@ -8,7 +8,7 @@ import {
   ProviderCredentialsWrapper,
   ProviderDetailsWrapper,
   ProviderHostsWrapper,
-  ProviderVirtualMachinesWrapper,
+  ProviderVirtualMachines,
   ProviderYAMLPageWrapper,
 } from './tabs';
 
@@ -38,7 +38,7 @@ export const VSphereProviderDetailsPage: React.FC<{ name: string; namespace: str
     {
       href: 'vms',
       name: t('Virtual Machines'),
-      component: () => <ProviderVirtualMachinesWrapper name={name} namespace={namespace} />,
+      component: () => <ProviderVirtualMachines name={name} namespace={namespace} />,
     },
     {
       href: 'hosts',

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/Details/ProviderDetails.tsx

@@ -50,11 +50,7 @@ export const ProviderDetails: React.FC<ProviderDetailsProps> = ({ obj, loaded, l
   return (
     <div>
       <PageSection variant="light" className="forklift-page-section--info">
-        <Alert
-          customIcon={<BellIcon />}
-          variant="warning"
-          title={t('How to create a migration plan')}
-        >
+        <Alert customIcon={<BellIcon />} variant="info" title={t('How to create a migration plan')}>
           <Trans t={t} ns="plugin__forklift-console-plugin">
             To migrate virtual machines from <strong>{provider.metadata.name}</strong> provider,
             select the virtual machines to migrate from the list of available virtual machines

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OVirtVirtualMachinesList.tsx

@@ -89,11 +89,13 @@ export const oVirtVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 export const OVirtVirtualMachinesList: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
   obj,
   loaded,
   loadError,
 }) => (
   <ProviderVirtualMachinesList
+    title={title}
     obj={obj}
     loaded={loaded}
     loadError={loadError}

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenShiftVirtualMachinesList.tsx

@@ -74,11 +74,13 @@ export const openShiftVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 export const OpenShiftVirtualMachinesList: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
   obj,
   loaded,
   loadError,
 }) => (
   <ProviderVirtualMachinesList
+    title={title}
     obj={obj}
     loaded={loaded}
     loadError={loadError}

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OpenStackVirtualMachinesList.tsx

@@ -105,11 +105,13 @@ export const openStackVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 export const OpenStackVirtualMachinesList: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
   obj,
   loaded,
   loadError,
 }) => (
   <ProviderVirtualMachinesList
+    title={title}
     obj={obj}
     loaded={loaded}
     loadError={loadError}

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/OvaVirtualMachinesList.tsx

@@ -43,11 +43,13 @@ export const ovaVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 export const OvaVirtualMachinesList: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
   obj,
   loaded,
   loadError,
 }) => (
   <ProviderVirtualMachinesList
+    title={title}
     obj={obj}
     loaded={loaded}
     loadError={loadError}

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/ProviderVirtualMachines.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
+import { Trans } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
 import { useProviderInventory } from 'src/modules/Providers/hooks';
 import { ProviderData } from 'src/modules/Providers/utils';
+import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { ProviderInventory, ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
+import { Alert, PageSection } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 import { OpenShiftVirtualMachinesList } from './OpenShiftVirtualMachinesList';
 import { OpenStackVirtualMachinesList } from './OpenStackVirtualMachinesList';
@@ -13,15 +17,18 @@ import { OVirtVirtualMachinesList } from './OVirtVirtualMachinesList';
 import { VSphereVirtualMachinesList } from './VSphereVirtualMachinesList';
 
 export interface ProviderVirtualMachinesProps extends RouteComponentProps {
+  title?: string;
   obj: ProviderData;
   loaded?: boolean;
   loadError?: unknown;
 }
 
-export const ProviderVirtualMachinesWrapper: React.FC<{ name: string; namespace: string }> = ({
+export const ProviderVirtualMachines: React.FC<{ name: string; namespace: string }> = ({
   name,
   namespace,
 }) => {
+  const { t } = useForkliftTranslation();
+
   const [provider, providerLoaded, providerLoadError] = useK8sWatchResource<V1beta1Provider>({
     groupVersionKind: ProviderModelGroupVersionKind,
     namespaced: true,
@@ -30,43 +37,66 @@ export const ProviderVirtualMachinesWrapper: React.FC<{ name: string; namespace:
   });
 
   const { inventory } = useProviderInventory<ProviderInventory>({ provider });
+  const obj = { provider, inventory };
+
+  return (
+    <>
+      <PageSection variant="light" className="forklift-page-section--info">
+        <Alert customIcon={<BellIcon />} variant="info" title={t('How to create a migration plan')}>
+          <Trans t={t} ns="plugin__forklift-console-plugin">
+            To migrate virtual machines from <strong>{obj?.provider.metadata.name}</strong>{' '}
+            provider, select the virtual machines to migrate from the list of available virtual
+            machines and click the <strong>Migrate</strong> button.
+          </Trans>
+        </Alert>
+      </PageSection>
 
-  const data = { provider, inventory };
-  switch (provider?.spec?.type) {
+      <ProviderVirtualMachinesListWrapper
+        obj={obj}
+        loaded={providerLoaded}
+        loadError={providerLoadError}
+      />
+    </>
+  );
+};
+
+export const ProviderVirtualMachinesListWrapper: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
+  obj,
+  loaded,
+  loadError,
+}) => {
+  switch (obj?.provider?.spec?.type) {
     case 'openshift':
       return (
         <OpenShiftVirtualMachinesList
-          obj={data}
-          loaded={providerLoaded}
-          loadError={providerLoadError}
+          title={title}
+          obj={obj}
+          loaded={loaded}
+          loadError={loadError}
         />
       );
     case 'openstack':
       return (
         <OpenStackVirtualMachinesList
-          obj={data}
-          loaded={providerLoaded}
-          loadError={providerLoadError}
+          title={title}
+          obj={obj}
+          loaded={loaded}
+          loadError={loadError}
         />
       );
     case 'ovirt':
       return (
-        <OVirtVirtualMachinesList
-          obj={data}
-          loaded={providerLoaded}
-          loadError={providerLoadError}
-        />
+        <OVirtVirtualMachinesList title={title} obj={obj} loaded={loaded} loadError={loadError} />
       );
     case 'vsphere':
       return (
-        <VSphereVirtualMachinesList
-          obj={data}
-          loaded={providerLoaded}
-          loadError={providerLoadError}
-        />
+        <VSphereVirtualMachinesList title={title} obj={obj} loaded={loaded} loadError={loadError} />
       );
     case 'ova':
-      return <OvaVirtualMachinesList obj={data} loaded={providerLoaded} />;
+      return (
+        <OvaVirtualMachinesList title={title} obj={obj} loaded={loaded} loadError={loadError} />
+      );
     default:
       // unsupported provider or loading errors will be handled by parent page
       return <></>;

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/VSphereVirtualMachinesList.tsx

@@ -77,11 +77,13 @@ export const vSphereVmFieldsMetadataFactory: ResourceFieldFactory = (t) => [
 ];
 
 export const VSphereVirtualMachinesList: React.FC<ProviderVirtualMachinesProps> = ({
+  title,
   obj,
   loaded,
   loadError,
 }) => (
   <ProviderVirtualMachinesList
+    title={title}
     obj={obj}
     loaded={loaded}
     loadError={loadError}

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useState } from 'react';
-import { Trans } from 'react-i18next';
 import { RouteComponentProps } from 'react-router-dom';
 import { GlobalActionWithSelection, withIdBasedSelection } from 'src/components/page/withSelection';
 import { ProviderData } from 'src/modules/Providers/utils';
@@ -14,18 +13,16 @@ import {
   ValueMatcher,
 } from '@kubev2v/common';
 import { Concern } from '@kubev2v/types';
-import { Alert, PageSection } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 import { useInventoryVms } from '../utils/useInventoryVms';
 
 import { MigrationAction } from './MigrationAction';
 import { VmData } from './VMCellProps';
 
 export interface ProviderVirtualMachinesListProps extends RouteComponentProps {
+  title?: string;
   obj: ProviderData;
   ns?: string;
-  name?: string;
   loaded?: boolean;
   loadError?: unknown;
   cellMapper: FC<RowProps<VmData>>;
@@ -41,6 +38,7 @@ const PageWithSelection = withIdBasedSelection<VmData>({
 });
 
 export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> = ({
+  title,
   obj,
   loaded,
   loadError,
@@ -65,37 +63,21 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
   ];
 
   return (
-    <>
-      <PageSection variant="light" className="forklift-page-section--info">
-        <Alert
-          customIcon={<BellIcon />}
-          variant="warning"
-          title={t('How to create a migration plan')}
-        >
-          <Trans t={t} ns="plugin__forklift-console-plugin">
-            To migrate virtual machines from <strong>{obj?.provider.metadata.name}</strong>{' '}
-            provider, select the virtual machines to migrate from the list of available virtual
-            machines and click the <strong>Migrate</strong> button.
-          </Trans>
-        </Alert>
-      </PageSection>
-
-      <PageWithSelection
-        data-testid="vm-list"
-        dataSource={[vmData || [], !loading, null]}
-        CellMapper={cellMapper}
-        fieldsMetadata={fieldsMetadataFactory(t)}
-        namespace={obj?.provider?.metadata?.namespace}
-        title={t('Virtual Machines')}
-        userSettings={userSettings}
-        extraSupportedFilters={{
-          concerns: SearchableGroupedEnumFilter,
-          features: EnumFilter,
-        }}
-        extraSupportedMatchers={[concernsMatcher, featuresMatcher]}
-        GlobalActionToolbarItems={actions}
-      />
-    </>
+    <PageWithSelection
+      data-testid="vm-list"
+      dataSource={[vmData || [], !loading, null]}
+      CellMapper={cellMapper}
+      fieldsMetadata={fieldsMetadataFactory(t)}
+      namespace={obj?.provider?.metadata?.namespace}
+      title={title ?? t('Virtual Machines')}
+      userSettings={userSettings}
+      extraSupportedFilters={{
+        concerns: SearchableGroupedEnumFilter,
+        features: EnumFilter,
+      }}
+      extraSupportedMatchers={[concernsMatcher, featuresMatcher]}
+      GlobalActionToolbarItems={actions}
+    />
   );
 };