Metal3 plugin i18n i

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

@@ -0,0 +1,41 @@
+{
+ "Bare Metal Host Details": "Bare Metal Host Details",
+ "Name": "Name",
+ "Description": "Description",
+ "Host Addresses": "Host Addresses",
+ "Machine": "Machine",
+ "Node": "Node",
+ "Created at": "Created at",
+ "Status": "Status",
+ "Power Status": "Power Status",
+ "No power management": "No power management",
+ "Restart pending": "Restart pending",
+ "Role": "Role",
+ "Model": "Model",
+ "Bios": "Bios",
+ "Serial Number": "Serial Number",
+ "Hardware": "Hardware",
+ "CPU": "CPU",
+ "RAM": "RAM",
+ "Storage": "Storage",
+ "Network Interfaces": "Network Interfaces",
+ "Disks": "Disks",
+ "Overview": "Overview",
+ "Details": "Details",
+ "Size": "Size",
+ "Type": "Type",
+ "Vendor": "Vendor",
+ "HCTL": "HCTL",
+ "PXE": "PXE",
+ "IP": "IP",
+ "Speed": "Speed",
+ "MAC Address": "MAC Address",
+ "VLAN ID": "VLAN ID",
+ "Bare Metal Host NICs": "Bare Metal Host NICs",
+ "New with Dialog": "New with Dialog",
+ "New from YAML": "New from YAML",
+ "Add Host": "Add Host",
+ "Bare Metal Hosts": "Bare Metal Hosts",
+ "Management Address": "Management Address",
+ "Add credentials": "Add credentials"
+}

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetails.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { useTranslation } from 'react-i18next';
 import { RebootingIcon } from '@patternfly/react-icons';
 import {
  referenceForModel,
@@ -50,7 +51,6 @@ import { HOST_REGISTERING_STATES } from '../../constants/bare-metal-host';
 import MachineLink from './MachineLink';
 import BareMetalHostPowerStatusIcon from './BareMetalHostPowerStatusIcon';
 import BareMetalHostStatus from './BareMetalHostStatus';
-import { HOST_SCHEDULED_FOR_RESTART, HOST_NO_POWER_MGMT } from './BareMetalHostSecondaryStatus';
 
 type BareMetalHostDetailsProps = {
  obj: BareMetalHostKind;
@@ -65,6 +65,7 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  nodes,
  nodeMaintenances,
 }) => {
+ const { t } = useTranslation();
  const { creationTimestamp } = host.metadata;
  const namespace = getNamespace(host);
  const nics = getHostNICs(host);
@@ -90,19 +91,19 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
 
  return (
  <div className="co-m-pane__body">
- <SectionHeading text="Bare Metal Host Details" />
+ <SectionHeading text={t('metal3-plugin~Bare Metal Host Details')} />
  <div className="row">
  <div className="col-xs-12 col-sm-6" id="name-description-column">
  <dl>
- <dt>Name</dt>
+ <dt>{t('metal3-plugin~Name')}</dt>
  <dd>{getName(host)}</dd>
  {description && (
  <>
- <dt>Description</dt>
+ <dt>{t('metal3-plugin~Description')}</dt>
  <dd>{description}</dd>
  </>
  )}
- <dt>Host Addresses</dt>
+ <dt>{t('metal3-plugin~Host Addresses')}</dt>
  <dd>
  <DetailPropertyList>
  <DetailPropertyListItem title="Management">
@@ -116,15 +117,15 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  </dd>
  {machineName && (
  <>
- <dt>Machine</dt>
+ <dt>{t('metal3-plugin~Machine')}</dt>
  <dd>
  <MachineLink host={host} />
  </dd>
  </>
  )}
  {nodeName && (
  <>
- <dt>Node</dt>
+ <dt>{t('metal3-plugin~Node')}</dt>
  <dd>
  <ResourceLink
  kind={referenceForModel(NodeModel)}
@@ -135,25 +136,25 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  </dd>
  </>
  )}
- <dt>Created at</dt>
+ <dt>{t('metal3-plugin~Created at')}</dt>
  <dd>
  <Timestamp timestamp={creationTimestamp} />
  </dd>
  </dl>
  </div>
  <div className="col-xs-12 col-sm-6">
  <dl>
- <dt>Status</dt>
+ <dt>{t('metal3-plugin~Status')}</dt>
  <dd>
  <BareMetalHostStatus {...status} nodeMaintenance={nodeMaintenance} host={host} />
  </dd>
  {/* power status is not available until host registration/inspection is finished */}
  {!HOST_REGISTERING_STATES.includes(provisioningState) && (
  <>
- <dt>Power Status</dt>
+ <dt>{t('metal3-plugin~Power Status')}</dt>
  <dd>
  {!hasPowerManagement(host) ? (
- <SecondaryStatus status={HOST_NO_POWER_MGMT} />
+ <SecondaryStatus status={t('metal3-plugin~No power management')} />
  ) : (
  <>
  <StatusIconAndText
@@ -162,7 +163,7 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  />
  {isHostScheduledForRestart(host) && (
  <StatusIconAndText
- title={HOST_SCHEDULED_FOR_RESTART}
+ title={t('metal3-plugin~Restart pending')}
  icon={<RebootingIcon />}
  />
  )}
@@ -173,19 +174,19 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  )}
  {role && (
  <>
- <dt>Role</dt>
+ <dt>{t('metal3-plugin~Role')}</dt>
  <dd>{role}</dd>
  </>
  )}
  {(manufacturer || productName) && (
  <>
- <dt>Model</dt>
+ <dt>{t('metal3-plugin~Model')}</dt>
  <dd>{_.filter([manufacturer, productName]).join(', ')}</dd>
  </>
  )}
  {bios && (
  <>
- <dt>Bios</dt>
+ <dt>{t('metal3-plugin~Bios')}</dt>
  <dd>
  <DetailPropertyList>
  <DetailPropertyListItem title="Version">
@@ -203,20 +204,22 @@ const BareMetalHostDetails: React.FC<BareMetalHostDetailsProps> = ({
  )}
  {serialNumber && (
  <>
- <dt>Serial Number</dt>
+ <dt>{t('metal3-plugin~Serial Number')}</dt>
  <dd>{serialNumber}</dd>
  </>
  )}
  {_.get(host, 'status.hardware') && (
  <>
- <dt>Hardware</dt>
+ <dt>{t('metal3-plugin~Hardware')}</dt>
  <dd>
  <DetailPropertyList>
- <DetailPropertyListItem title="CPU">
+ <DetailPropertyListItem title={t('metal3-plugin~CPU')}>
  {CPUCount ? `${CPUCount}x ${CPUModel}` : DASH}
  </DetailPropertyListItem>
- <DetailPropertyListItem title="RAM">{RAMGB}</DetailPropertyListItem>
- <DetailPropertyListItem title="Storage">
+ <DetailPropertyListItem title={t('metal3-plugin~RAM')}>
+ {RAMGB}
+ </DetailPropertyListItem>
+ <DetailPropertyListItem title={t('metal3-plugin~Storage')}>
  {totalStorageCapacity}
  </DetailPropertyListItem>
  </DetailPropertyList>

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDetailsPage.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { DetailsPage } from '@console/internal/components/factory';
 import { navFactory, FirehoseResource } from '@console/internal/components/utils';
@@ -21,6 +22,7 @@ type BareMetalHostDetailsPageProps = {
 };
 
 const BareMetalHostDetailsPage: React.FC<BareMetalHostDetailsPageProps> = (props) => {
+ const { t } = useTranslation();
  const [hasNodeMaintenanceCapability, maintenanceModel] = useMaintenanceCapability();
  const bmoEnabled = useFlag(BMO_ENABLED_FLAG);
  const resources: FirehoseResource[] = [
@@ -56,22 +58,22 @@ const BareMetalHostDetailsPage: React.FC<BareMetalHostDetailsPageProps> = (props
 
  const nicsPage = {
  href: 'nics',
- name: 'Network Interfaces',
+ name: t('metal3-plugin~Network Interfaces'),
  component: BareMetalHostNICs,
  };
  const disksPage = {
  href: 'disks',
- name: 'Disks',
+ name: t('metal3-plugin~Disks'),
  component: BareMetalHostDisks,
  };
  const dashboardPage = {
  href: '',
- name: 'Overview',
+ name: t('metal3-plugin~Overview'),
  component: BareMetalHostDashboard,
  };
  const detailsPage = {
  href: 'details',
- name: 'Details',
+ name: t('metal3-plugin~Details'),
  component: BareMetalHostDetails,
  };
  return (

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostDisks.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { sortable } from '@patternfly/react-table';
 import { Table, TableRow, TableData, RowFunction } from '@console/internal/components/factory';
 import { humanizeDecimalBytes } from '@console/internal/components/utils';
 import { getHostStorage } from '../../selectors';
 import { BareMetalHostDisk, BareMetalHostKind } from '../../types';
 
-const DisksTableHeader = () => [
- { title: 'Name', sortField: 'name', transforms: [sortable] },
- { title: 'Size', sortField: 'sizeBytes', transforms: [sortable] },
- { title: 'Type', sortField: 'rotational', transforms: [sortable] },
- { title: 'Model', sortField: 'model', transforms: [sortable] },
- { title: 'Serial Number', sortField: 'serialNumber', transforms: [sortable] },
- { title: 'Vendor', sortField: 'vendor', transforms: [sortable] },
- { title: 'HCTL', sortField: 'hctl', transforms: [sortable] },
+const DisksTableHeader = (t: TFunction) => () => [
+ { title: t('metal3-plugin~Name'), sortField: 'name', transforms: [sortable] },
+ { title: t('metal3-plugin~Size'), sortField: 'sizeBytes', transforms: [sortable] },
+ { title: t('metal3-plugin~Type'), sortField: 'rotational', transforms: [sortable] },
+ { title: t('metal3-plugin~Model'), sortField: 'model', transforms: [sortable] },
+ { title: t('metal3-plugin~Serial Number'), sortField: 'serialNumber', transforms: [sortable] },
+ { title: t('metal3-plugin~Vendor'), sortField: 'vendor', transforms: [sortable] },
+ { title: t('metal3-plugin~HCTL'), sortField: 'hctl', transforms: [sortable] },
 ];
 
 const DisksTableRow: RowFunction<BareMetalHostDisk> = ({ obj, index, key, style }) => {
@@ -37,14 +39,15 @@ type BareMetalHostDisksProps = {
 };
 
 const BareMetalHostDisks: React.FC<BareMetalHostDisksProps> = ({ obj: host, loadError }) => {
+ const { t } = useTranslation();
  const disks = getHostStorage(host);
  return (
  <div className="co-m-list">
  <div className="co-m-pane__body">
  <Table
  data={disks}
  aria-label="Bare Metal Host Disks"
- Header={DisksTableHeader}
+ Header={DisksTableHeader(t)}
  Row={DisksTableRow}
  loaded={!!host}
  loadError={loadError}

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostNICs.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { TFunction } from 'i18next';
 import { OutlinedCheckSquareIcon, OutlinedSquareIcon } from '@patternfly/react-icons';
 import { sortable } from '@patternfly/react-table';
 import { Table, TableRow, TableData, RowFunction } from '@console/internal/components/factory';
 import { getHostNICs } from '../../selectors';
 import { BareMetalHostNIC, BareMetalHostKind } from '../../types';
 
-const NICsTableHeader = () => [
- { title: 'Name', sortField: 'name', transforms: [sortable] },
- { title: 'Model', sortField: 'model', transforms: [sortable] },
- { title: 'PXE', sortField: 'pxe', transforms: [sortable] },
- { title: 'IP', sortField: 'ip', transforms: [sortable] },
- { title: 'Speed', sortField: 'speedGbps', transforms: [sortable] },
- { title: 'MAC Address', sortField: 'mac', transforms: [sortable] },
- { title: 'VLAN ID', sortField: 'vlanId', transforms: [sortable] },
+const NICsTableHeader = (t: TFunction) => () => [
+ { title: t('metal3-plugin~Name'), sortField: 'name', transforms: [sortable] },
+ { title: t('metal3-plugin~Model'), sortField: 'model', transforms: [sortable] },
+ { title: t('metal3-plugin~PXE'), sortField: 'pxe', transforms: [sortable] },
+ { title: t('metal3-plugin~IP'), sortField: 'ip', transforms: [sortable] },
+ { title: t('metal3-plugin~Speed'), sortField: 'speedGbps', transforms: [sortable] },
+ { title: t('metal3-plugin~MAC Address'), sortField: 'mac', transforms: [sortable] },
+ { title: t('metal3-plugin~VLAN ID'), sortField: 'vlanId', transforms: [sortable] },
 ];
 
 const NICsTableRow: RowFunction<BareMetalHostNIC> = ({ obj: nic, index, key, style }) => {
@@ -36,14 +38,15 @@ type BareMetalHostNICsProps = {
 };
 
 const BareMetalHostNICs: React.FC<BareMetalHostNICsProps> = ({ obj: host, loadError }) => {
+ const { t } = useTranslation();
  const nics = getHostNICs(host);
  return (
  <div className="co-m-list">
  <div className="co-m-pane__body">
  <Table
  data={nics}
- aria-label="Bare Metal Host NICs"
- Header={NICsTableHeader}
+ aria-label={t('metal3-plugin~Bare Metal Host NICs')}
+ Header={NICsTableHeader(t)}
  Row={NICsTableRow}
  loaded={!!host}
  loadError={loadError}

frontend/packages/metal3-plugin/src/components/baremetal-hosts/BareMetalHostSecondaryStatus.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { SecondaryStatus } from '@console/shared';
 import { BareMetalHostKind } from '../../types';
 import {
@@ -13,20 +14,18 @@ type BareMetalHostSecondaryStatusProps = {
  host: BareMetalHostKind;
 };
 
-export const HOST_SCHEDULED_FOR_RESTART = 'Restart pending';
-export const HOST_NO_POWER_MGMT = 'No power management';
-
 const BareMetalHostSecondaryStatus: React.FC<BareMetalHostSecondaryStatusProps> = ({ host }) => {
+ const { t } = useTranslation();
  const powerStatus = getHostPowerStatus(host);
  const provisioningState = getHostProvisioningState(host);
  const status = [];
 
  if (!hasPowerManagement(host)) {
- status.push(HOST_NO_POWER_MGMT);
+ status.push(t('metal3-plugin~No power management'));
  // don't show power status when host registration/inspection hasn't finished
  } else if (!HOST_REGISTERING_STATES.includes(provisioningState)) {
  if (isHostScheduledForRestart(host)) {
- status.push(HOST_SCHEDULED_FOR_RESTART);
+ status.push(t('metal3-plugin~Restart pending'));
  }
 
  // don't show power status when host is powered on