kubevirt i18n vm and vmt lists

frontend/packages/kubevirt-plugin/locales/en/kubevirt-plugin.json

@@ -106,8 +106,30 @@
  "Workload scheduled with dedicated resources (guaranteed policy)": "Workload scheduled with dedicated resources (guaranteed policy)",
  "No Dedicated resources applied": "No Dedicated resources applied",
  "No Eviction Strategy": "No Eviction Strategy",
+ "Provider": "Provider",
+ "Boot source": "Boot source",
+ "The image has been added to the cluster via the operator.": "The image has been added to the cluster via the operator.",
+ "The image has been added to the cluster by a user.": "The image has been added to the cluster by a user.",
+ "Add source": "Add source",
+ "Provide a source for the template across the cluster.": "Provide a source for the template across the cluster.",
+ "Boot source error": "Boot source error",
+ "Error with the provided boot source.": "Error with the provided boot source.",
+ "More information on boot sources": "More information on boot sources",
+ "Storage": "Storage",
+ "Workload profile": "Workload profile",
+ "View full details": "View full details",
+ "Template details": "Template details",
+ "Create Virtual Machine": "Create Virtual Machine",
+ "Red Hat supported templates are labeled below.": "Red Hat supported templates are labeled below.",
+ "Learn more about template support": "Learn more about template support",
+ "Create": "Create",
+ "With Wizard": "With Wizard",
+ "With YAML": "With YAML",
+ "With Import wizard": "With Import wizard",
  "Virtual Machines": "Virtual Machines",
  "Templates": "Templates",
+ "Virtual Machine": "Virtual Machine",
+ "Template": "Template",
  "Open Console in new Window": "Open Console in new Window",
  "Guest login credentials": "Guest login credentials",
  "The following credentials for this operating system were created via <2>Cloud-init</2>. If unsuccessful cloud-init could be improperly configured. Please contact the image provider for more information.": "The following credentials for this operating system were created via <2>Cloud-init</2>. If unsuccessful cloud-init could be improperly configured. Please contact the image provider for more information.",
@@ -129,7 +151,6 @@
  "Serial Number": "Serial Number",
  "Add Config Map, Secret or Service Account": "Add Config Map, Secret or Service Account",
  "View Pending Changes": "View Pending Changes",
- "Template": "Template",
  "Pod": "Pod",
  "No Toleration rules": "No Toleration rules",
  "No Affinity rules": "No Affinity rules",
@@ -143,8 +164,7 @@
  "No virtual machines found": "No virtual machines found",
  "See the <1>templates tab</1> to quickly create a virtual machine from the available templates.": "See the <1>templates tab</1> to quickly create a virtual machine from the available templates.",
  "Create virtual machine": "Create virtual machine",
- "Create Virtual Machine": "Create Virtual Machine",
- "`Virtual Machine Instance {{name}}`": "`Virtual Machine Instance {{name}}`",
+ "Virtual Machine Instance {{name}}": "Virtual Machine Instance {{name}}",
  "Consider using a Virtual Machine that will provide additional management capabilities to a VirtualMachineInstance inside the cluster.": "Consider using a Virtual Machine that will provide additional management capabilities to a VirtualMachineInstance inside the cluster.",
  "Learn more": "Learn more",
  "No users logged in": "No users logged in",

frontend/packages/kubevirt-plugin/src/components/create-vm/create-vm.tsx

@@ -397,7 +397,7 @@ export const CreateVM: React.FC<RouteComponentProps> = ({ location }) => {
  return (
  <div className="kubevirt-create-vm-modal__container">
  <div className="yaml-editor__header">
- <h1 className="yaml-editor__header-text">Create Virtual machine from template</h1>
+ <h1 className="yaml-editor__header-text">Create Virtual Machine from template</h1>
  </div>
  {created ? (
  <SuccessResultsComponent name={state.name} namespace={state.namespace} />

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import * as classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
 import { useSelector } from 'react-redux';
@@ -95,52 +97,52 @@ const tableColumnClasses = (showNamespace: boolean) => [
  Kebab.columnClass,
 ];
 
-const VMTemplateTableHeader = (showNamespace: boolean) =>
+const VMTemplateTableHeader = (showNamespace: boolean, t: TFunction) =>
  dimensifyHeader(
  [
  {
- title: 'Name',
+ title: t('kubevirt-plugin~Name'),
  sortFunc: 'vmTemplateName',
  transforms: [sortable],
  },
  {
- title: 'Provider',
+ title: t('kubevirt-plugin~Provider'),
  },
  {
- title: 'Namespace',
+ title: t('kubevirt-plugin~Namespace'),
  sortField: 'metadata.namespace',
  transforms: [sortable],
  },
  {
- title: 'Boot source',
+ title: t('kubevirt-plugin~Boot source'),
  header: {
  info: {
  popover: (
  <Stack hasGutter>
  <StackItem>
  <SuccessStatus title={BOOT_SOURCE_COMMUNITY} />
- The image has been added to the cluster via the operator.
+ {t('kubevirt-plugin~The image has been added to the cluster via the operator.')}
  </StackItem>
  <StackItem>
  <SuccessStatus title={BOOT_SOURCE_USER} />
- The image has been added to the cluster by a user.
+ {t('kubevirt-plugin~The image has been added to the cluster by a user.')}
  </StackItem>
  <StackItem>
  <GenericStatus
  Icon={(props) => <PlusCircleIcon {...props} color={blueInfoColor.value} />}
- title="Add source"
+ title={t('kubevirt-plugin~Add source')}
  />
- Provide a source for the template across the cluster.
+ {t('kubevirt-plugin~Provide a source for the template across the cluster.')}
  </StackItem>
  <StackItem>
- <ErrorStatus title="Boot source error" />
- Error with the provided boot source.
+ <ErrorStatus title={t('kubevirt-plugin~Boot source error')} />
+ {t('kubevirt-plugin~Error with the provided boot source.')}
  </StackItem>
  </Stack>
  ),
- ariaLabel: 'More information on boot sources',
+ ariaLabel: t('kubevirt-plugin~More information on boot sources'),
  popoverProps: {
- headerContent: 'Boot source',
+ headerContent: t('kubevirt-plugin~Boot source'),
  },
  },
  },
@@ -166,24 +168,25 @@ const VMTemplateDetailsBody: React.FC<VMTemplateDetailsBodyProps> = ({
  template,
  sourceStatus,
 }) => {
+ const { t } = useTranslation();
  return (
  <TextContent>
  <Text>{getTemplateName(template)}</Text>
  <Text>
  <div className="kubevirt-vm-template-popover">
- <div>Storage</div>
+ <div>{t('kubevirt-plugin~Storage')}</div>
  <div>{getTemplateSizeRequirement(template, sourceStatus)}</div>
  </div>
  <div className="kubevirt-vm-template-popover">
- <div>Memory</div>
+ <div>{t('kubevirt-plugin~Memory')}</div>
  <div>{getTemplateMemory(template)}</div>
  </div>
  <div className="kubevirt-vm-template-popover">
- <div>CPU</div>
+ <div>{t('kubevirt-plugin~CPU')}</div>
  <div>{vCPUCount(getCPU(selectVM(template)))}</div>
  </div>
  <div className="kubevirt-vm-template-popover">
- <div>Workload profile</div>
+ <div>{t('kubevirt-plugin~Workload profile')}</div>
  <div>{getWorkloadProfile(template)}</div>
  </div>
  </Text>
@@ -193,7 +196,7 @@ const VMTemplateDetailsBody: React.FC<VMTemplateDetailsBodyProps> = ({
  data-test-id={template.metadata.name}
  className="co-resource-item__resource-name"
  >
- View full details
+ {t('kubevirt-plugin~View full details')}
  </Link>
  </TextContent>
  );
@@ -217,6 +220,7 @@ const VMTemplateTableRow: RowFunction<TemplateItem, VMTemplateTableRowProps> = (
  key,
  style,
 }) => {
+ const { t } = useTranslation();
  const [template] = obj.variants;
  const dimensify = dimensifyRow(tableColumnClasses(!namespace));
  const sourceStatus = getTemplateSourceStatus({ template, pvcs, dataVolumes, pods });
@@ -258,18 +262,18 @@ const VMTemplateTableRow: RowFunction<TemplateItem, VMTemplateTableRowProps> = (
  <TableData className={dimensify()}>
  <Popover
  position={PopoverPosition.top}
- headerContent={<div>Template details</div>}
+ headerContent={<div>{t('kubevirt-plugin~Template details')}</div>}
  bodyContent={<VMTemplateDetailsBody template={template} sourceStatus={sourceStatus} />}
  >
  <Button variant="secondary" className="kubevirt-vm-template-details">
- Details
+ {t('kubevirt-plugin~Details')}
  </Button>
  </Popover>
  <Button
  onClick={() => withSupportModal(obj, () => createVMAction(obj, sourceStatus))}
  variant="secondary"
  >
- Create Virtual Machine
+ {t('kubevirt-plugin~Create Virtual Machine')}
  </Button>
  </TableData>
  <TableData className={dimensify(true)}>
@@ -301,14 +305,21 @@ type VirtualMachineTemplatesProps = React.ComponentProps<typeof Table> & {
  };
 };
 
-export const VMTemplateSupport: React.FC = () => (
- <>
- Red Hat supported templates are labeled below.{' '}
- <ExternalLink href={SUPPORT_URL} text="Learn more about template support" />
- </>
-);
+export const VMTemplateSupport: React.FC = () => {
+ const { t } = useTranslation();
+ return (
+ <>
+ {t('kubevirt-plugin~Red Hat supported templates are labeled below.')}{' '}
+ <ExternalLink
+ href={SUPPORT_URL}
+ text={t('kubevirt-plugin~Learn more about template support')}
+ />
+ </>
+ );
+};
 
 const VirtualMachineTemplates: React.FC<VirtualMachineTemplatesProps> = (props) => {
+ const { t } = useTranslation();
  const [isPinned, togglePin] = usePinnedTemplates();
  const activeNamespace = useSelector(getActiveNamespace);
  const namespace = activeNamespace === ALL_NAMESPACES_KEY ? undefined : activeNamespace;
@@ -337,7 +348,7 @@ const VirtualMachineTemplates: React.FC<VirtualMachineTemplatesProps> = (props)
  <Table
  {...props}
  aria-label={VM_TEMPLATE_LABEL_PLURAL}
- Header={() => VMTemplateTableHeader(!namespace)}
+ Header={() => VMTemplateTableHeader(!namespace, t)}
  Row={(rowProps) => <VMTemplateTableRow {...rowProps} />}
  virtualize
  customData={{
@@ -379,6 +390,7 @@ const flatten = ({ vmTemplates, vmCommonTemplates }) => {
 
 const VirtualMachineTemplatesPage: React.FC<VirtualMachineTemplatesPageProps &
  React.ComponentProps<typeof ListPage>> = (props) => {
+ const { t } = useTranslation();
  const { skipAccessReview, noProjectsAvailable, showTitle } = props.customData;
  const namespace = props.match.params.ns;
 
@@ -431,7 +443,7 @@ const VirtualMachineTemplatesPage: React.FC<VirtualMachineTemplatesPageProps &
  <MultiListPage
  {...modifiedProps}
  createAccessReview={createAccessReview}
- createButtonText="Create"
+ createButtonText={t('kubevirt-plugin~Create')}
  title={VM_TEMPLATE_LABEL_PLURAL}
  showTitle={showTitle}
  ListComponent={VirtualMachineTemplates}

frontend/packages/kubevirt-plugin/src/components/vms/virtualization.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { Link, Redirect, RouteComponentProps } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import {
@@ -20,7 +21,7 @@ import { useSafetyFirst } from '@console/internal/components/safety-first';
 import { VirtualMachinesPage } from './vm';
 import { VirtualMachineTemplatesPage } from '../vm-templates/vm-template';
 import { VirtualMachineModel } from '../../models';
-import { VMWizardActionLabels, VMWizardMode, VMWizardName } from '../../constants';
+import { VMWizardMode, VMWizardName } from '../../constants';
 import { getVMWizardCreateLink } from '../../utils/url';
 import {
  VMWARE_KUBEVIRT_VMWARE_CONFIG_MAP_NAME,
@@ -55,44 +56,42 @@ export const RedirectToVirtualizationTemplatePage: React.FC<RouteComponentProps<
  />
 );
 
-const title = 'Virtualization';
-
-const vmMenuItems = [
+const vmMenuItems = (t: TFunction) => [
  {
  test: 'vm-wizard',
  wizardName: VMWizardName.BASIC,
  mode: VMWizardMode.VM,
- label: VMWizardActionLabels.WIZARD,
+ label: t('kubevirt-plugin~With Wizard'),
  },
  {
  test: 'vm-yaml',
  wizardName: VMWizardName.YAML,
  mode: VMWizardMode.VM,
- label: VMWizardActionLabels.YAML,
+ label: t('kubevirt-plugin~With YAML'),
  },
 ];
 
-const importMenuItems = [
+const importMenuItems = (t: TFunction) => [
  {
  test: 'vm-import',
  wizardName: VMWizardName.WIZARD,
  mode: VMWizardMode.IMPORT,
- label: VMWizardActionLabels.IMPORT,
+ label: t('kubevirt-plugin~With Import wizard'),
  },
 ];
 
-const templateMenuItems = [
+const templateMenuItems = (t: TFunction) => [
  {
  test: 'template-wizard',
  wizardName: VMWizardName.WIZARD,
  mode: VMWizardMode.TEMPLATE,
- label: VMWizardActionLabels.WIZARD,
+ label: t('kubevirt-plugin~With Wizard'),
  },
  {
  test: 'template-yaml',
  wizardName: VMWizardName.YAML,
  mode: VMWizardMode.TEMPLATE,
- label: VMWizardActionLabels.YAML,
+ label: t('kubevirt-plugin~With YAML'),
  },
 ];
 
@@ -167,34 +166,42 @@ export const WrappedVirtualizationPage: React.FC<VirtualizationPageProps> = (pro
  return (
  <>
  <Helmet>
- <title>{title}</title>
+ <title>{t('kubevirt-plugin~Virtualization')}</title>
  </Helmet>
  <div className="co-m-nav-title co-m-nav-title--row">
  <h1 className="co-m-pane__heading" data-test-id="cluster-settings-page-heading">
- {title}
+ {t('kubevirt-plugin~Virtualization')}
  </h1>
  <div className="co-actions" data-test-id="details-actions">
  <Dropdown
  data-test-id="item-create"
  onSelect={() => setOpen(false)}
  toggle={
  <DropdownToggle onToggle={setOpen} isPrimary>
- Create
+ {t('kubevirt-plugin~Create')}
  </DropdownToggle>
  }
  isOpen={isOpen}
  dropdownItems={[
- <DropdownGroup className="kv-dropdown-group" label="Virtual machine" key="vm">
- {[...vmMenuItems, ...(importAllowed ? importMenuItems : [])].map(getMenuItem)}
+ <DropdownGroup
+ className="kv-dropdown-group"
+ label={t('kubevirt-plugin~Virtual Machine')}
+ key="vm"
+ >
+ {[...vmMenuItems(t), ...(importAllowed ? importMenuItems(t) : [])].map(getMenuItem)}
  </DropdownGroup>,
  <DropdownGroup
  className="kv-dropdown-group kv-dropdown-group--separator"
  key="separator"
  >
  <DropdownSeparator />
  </DropdownGroup>,
- <DropdownGroup className="kv-dropdown-group" label="Template" key="vm-template">
- {templateMenuItems.map(getMenuItem)}
+ <DropdownGroup
+ className="kv-dropdown-group"
+ label={t('kubevirt-plugin~Template')}
+ key="vm-template"
+ >
+ {templateMenuItems(t).map(getMenuItem)}
  </DropdownGroup>,
  ]}
  isGrouped

frontend/packages/kubevirt-plugin/src/components/vms/vm.tsx

@@ -88,7 +88,7 @@ const VMHeader = (t: TFunction) => () =>
  transforms: [sortable],
  },
  {
- title: 'Namespace',
+ title: t('kubevirt-plugin~Namespace'),
  sortField: 'metadata.namespace',
  transforms: [sortable],
  },

frontend/packages/kubevirt-plugin/src/components/vms/vmi-details-page.tsx

@@ -106,7 +106,7 @@ export const VirtualMachinesInstanceDetailsPage: React.FC<VirtualMachinesInstanc
  >
  <HintBlock
  className="kubevirt-details-page__hint-block"
- title={t('kubevirt-plugin~`Virtual Machine Instance {{name}}`', { name })}
+ title={t('kubevirt-plugin~Virtual Machine Instance {{name}}', { name })}
  >
  <p>
  {t(